Skip to content
All primitives

A primitive is one control you drop into a form or a toolbar — a segmented control, an input with an addon, a tag field.

Navigation & Steps

6 of the 54 primitives in the catalog. Every one is a single file of plain markup and Tailwind classes — paste it and it works.

Open the full page for this primitive

Progress Steps

An ordered list in a nav, not a row of divs — so the count and the position come free, and aria-current names the step you are on. Horizontal and vertical, because four labels do not fit on a phone.

Navigation & Steps145 lines1 dep
Open the full page for this primitive

Tree View

One tab stop for the whole tree, with the ARIA tree keyboard contract in full — including typeahead and the arrow keys mapped through the reading direction.

Navigation & Steps235 lines1 dep
Open the full page for this primitive

Tabs

One tab stop for the whole list, arrow keys mapped through the reading direction, and a manual-activation mode so arrowing past five expensive panels does not fire four requests nobody asked for.

Navigation & Steps181 linesNo deps
Open the full page for this primitive

Pagination

A page window that keeps its width while you page and never draws an ellipsis for a single page — as real links when you pass getHref, so a listing stays crawlable and works without JavaScript.

Navigation & Steps179 lines1 dep
Open the full page for this primitive

Accordion

Buttons inside real headings, with panels that stay mounted so aria-controls resolves and go inert when shut so Tab cannot walk into invisible content — animated by a grid-row transition, off under reduced motion.

Navigation & Steps138 lines1 dep