Composition

Every control is assembled from other controls, so consistency comes from the structure rather than from authors remembering it.

A Dialog contains a Button, and that Button contains an Icon: the same Icon that sits inside a Badge, a Menu item or an Alert. Nothing is drawn from scratch at the point of use. Each unit is composed from smaller units, down to a handful of primitives.

Because the pieces are shared, consistency is structural rather than disciplinary. A thing that looks like an input is the Input; there is no second way to render one. Spacing, focus ring, disabled state and height at a given size all arrive with the component.

So output looks right whoever wrote it. A person and a model reaching for Button get the same Button, because there is exactly one. Composition, not review, keeps the surface consistent.

Most reused

Ranked by how many documented components and compositions import each one.

Flex
Flexbox container with token-driven direction, alignment, justification, wrapping, and gap. Layout props (direction, justify, align, wrap, gap) accept a single value or a per-breakpoint responsive object like { base: "column", md: "row" }; set responsiveMode to "container" to resolve breakpoints against the nearest container instead of the viewport.
61 dependents
Icon
Renders the given icon as a decorative SVG - always aria-hidden and non-focusable, with a fixed 1.5 stroke width.
52 dependents
Button
Button styled by a tone × emphasis grammar: tone sets the semantic colour (neutral / brand / danger) and emphasis sets the visual weight (solid / soft / outline / ghost / transparent / link). Any pairing is valid - there is no fixed "primary/secondary" list; those looks are expressed as tone × emphasis pairs. An icon-only button (an icon-* size, or icon with no children) requires an aria-label; a dev-only console warning fires when it is missing. With render, styling and icon/dot decorations are applied to the element you pass in.
32 dependents
Center
Center centres its children both vertically and horizontally using flexbox. **Important:** Children that use CSS Grid with fr units must define their own width (e.g., w-96, max-w-md). This is because fr units require a defined container width to calculate available space, but flex items without explicit width use intrinsic sizing - creating a circular dependency where the grid collapses to minimum content width.
26 dependents
Grid
CSS Grid layout with configurable columns, gaps, and alignment; columns, the gaps and the alignment props accept a responsive object keyed by breakpoint. Compose column spans with GridCol children.
16 dependents
Text
The typography primitive for body copy - renders a <p> (or any element via as or render). Ships without a line-length cap; add max-w-prose at the call site for long-form prose. size names a type role, defaults to paragraph-sm and accepts responsive values: size={{ base: "paragraph-sm", md: "paragraph-lg" }}.
16 dependents
Stack
Flex container for arranging children in a line with consistent spacing. Layout props (direction, align, justify, gap) accept a single value or a per-breakpoint responsive object like { base: "column", md: "row" }; set responsiveMode to "container" to resolve breakpoints against the nearest container instead of the viewport. Stacks vertically by default.
12 dependents
Dot
Dot component for indicating status, colour, or presence. Uses semantic design token variants by default, with optional custom colour override.
9 dependents

One size scale

Icon, Button, Badge and Input all take their height and glyph size from these eight tokens, so they line up without measuring.

Size	Control height	Icon
`2xs`	`h-6`
`xs`	`h-7`
`sm`	`h-8`
`base`	`h-9`
`lg`	`h-10`
`xl`	`h-12`
`2xl`	`h-14`
`3xl`	`h-16`

Composition runs one way

Primitives know nothing of the components that use them, and components know nothing of the compositions above. The build enforces this; the allowed-imports matrix is on the principles page.