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 filterable single-select implementing the ARIA 1.2 combobox pattern, with active-descendant browsing that never moves focus out of the input.

A modal command palette: fuzzy-ranked results, grouped output, active-descendant browsing and a keyboard-first footer.

A modal with focus trapping, scroll locking, Escape dismissal and focus return — in four sizes.

The ARIA menu-button pattern with grouped items, roving focus, shortcuts and destructive styling.

The accessibility contract shared by every form control — label, help text, error, success and the ARIA wiring that connects them.

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

A semantic table with two responsive strategies, a focusable scroll region and a built-in empty state.

Transient notifications in a single polite live region, with pinned errors and an optional undo action.

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.

An edge-anchored modal — left, right or bottom — sharing the dialog’s focus and scroll contract.

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

A drop zone that is fully operable from the keyboard, with local file listing, size validation and removal.

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.

Segmented one-time-code entry that advances on type, steps back on backspace and fills every box from a single paste.

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.

A non-modal layer with six CSS placements — the page behind stays interactive.

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.

ARIA tabs with manual activation and three appearances.

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.