Components

A block-level message attached to a region, with tone-appropriate live-region politeness.

The complete action surface: nine variants, five sizes, and a loading state that preserves the control’s measured width.

A discrete record in a collection, with five tones and a composable header, title, description and footer.

A KPI tile with trend direction, invertible "good" semantics and a decorative sparkline.

A compact feed row: actor, action, target, time and optional metadata.

Deterministic initials on a name-derived tint, in five sizes, with an optional indicator.

Overlapping avatars with an overflow count and a single accessible name for the whole set.

Compact labelling with seven tones, three appearances and an optional second, colour-independent signal.

A hierarchy trail with a collapsing middle for deep paths and horizontal scroll on mobile.

Multi-select control with inline and card appearances, plus a genuine indeterminate state for bulk selection.

A destructive-action guard with a static backdrop, a pending state and a confirm button that is never focused first.

Five measured widths with one consistent responsive gutter.

Native date, time, month and datetime entry on the shared control surface.

Horizontal and vertical rules in three weights, with an optional interrupting label.

The three-part empty state — what is missing, why, and the single most likely next action.

Responsive column grids plus an auto-fit mode that needs no breakpoint decisions.

Single-line text entry with leading and trailing slots, three sizes and a shared control surface used by every other text control.

Real anchors, a fixed-width page window and correctly disabled ends.

A titled region with a header action row and an optional flush body for tables and lists.

Determinate and indeterminate progress as a bar or a ring, with four tones.

Mutually exclusive choice, with a card appearance for decisions that need explanation.

A search input with a keyboard-reachable clear button and an optional shortcut hint.

A styled native select with optional groups — the right choice whenever the option list is short and known.

Placeholder geometry for resolving content, in line, block, circle and button shapes.

A range input with a token-painted track, live value read-out and custom value formatting.

A pure-CSS indeterminate indicator that inherits currentColor and costs nothing to render.

Flex layout with a density-aware gap scale, alignment and wrapping.

System state as icon plus label plus colour — never colour alone.

Multi-step progress in horizontal and vertical orientations, with state conveyed in words as well as ticks.

An immediate on/off setting, with leading alignment for forms and trailing alignment for settings rows.

Multi-line entry on the shared control surface, with a resize affordance that respects the layout.

A chronology as an ordered list, with tone-coded markers and machine-readable timestamps.

Supplementary text on hover and on keyboard focus, dismissible with Escape.