Components
42 families, each live in both themes. Every one is checked with axe and the keyboard before it ships.
Actions
Inputs
- FieldLabel, description and validation around any control. Horizontal layout for settings rows; FieldActions puts a form's own controls on one line under its fields.
- InputQuiet surface, hairline border and a soft focus halo. Adornment slots for icons, keys and buttons. Bare edits text in place inside a heading or a card.
- TextareaGrows with its content via field-sizing (JS fallback), clamped by minRows/maxRows. The bare variant drops the frame, for a message box or an editor that draws its own.
- SelectPick one from a short list. Ink check, grouped options, scroll arrows, ghost variant for toolbars. NativeSelect is the platform's own list (its keyboard, the phone's picker) in the same field look.
- ComboboxFilterable select for longer lists: one value, or several as removable chips, and an empty state when nothing matches. Autocomplete acts on a pick and keeps nothing selected.
- CheckboxInk fill with a check that draws itself on. In a CheckboxGroup, a parent checkbox checks or clears them all and shows the mixed state when only some are on.
- RadioSingle choice. Ink dot springs in; card variant for weighty choices such as who can join a team, with a preview across its top for a choice best shown (a theme); swatches for a colour or a picture.
- SwitchInk track, spring-driven thumb that stretches while pressed. Instant under reduced motion.
- Choice rowOne choice in a list, as a button: an icon or logo, a title, a muted detail and something at the end. Plain rows wash on hover; card rows are tiles for weighty choices. aria-pressed or aria-current marks the chosen row, and it takes the selected fill.
- SliderInk range fill, thumb halo on hover/focus/drag, optional value tooltip and labelled marks.
- Segmented controlSingle, always-selected choice. The selected segment takes the pill at once. A segment that's off can say why, as a disabled button does.
- Filter chipAn on/off pill that narrows a list: ink when on, a quiet surface when off, with aria-pressed. A row of them filters; one choice of a few that always has one is a segmented control.
- Inline editRenames in place: opens focused with the text selected; Enter or leaving keeps it, Escape drops it. Input-method Enter doesn't commit.
- Code input & displayOne-time codes, typed or shown: monospace figures with one letter-spacing, left to right in every language. CodeInput takes `length` digits, or with `letters` a device code; CodeDisplay renders as a button when a click copies.
Overlays
- MenuDropdown actions with icons, platform-aware shortcuts, checkbox/radio items, submenus and a calm destructive variant. The highlight is a quiet tint, not the accent.
- Context MenuPointer-anchored menus that share every item style with Menu.
- PopoverInteractive floating cards anchored to a trigger, with an optional close button.
- DialogModal surface with a soft blurred scrim and spring entrance. Four widths: sm, md, lg, xl.
- Alert DialogInterrupts for decisions: no corner close, explicit confirm/cancel, async confirm keeps the dialog open with a loading button.
- SheetFloating panels that spring in from any edge and follow your finger — swipe toward their edge to dismiss.
- Command Palettecmdk inside Dialog: fuzzy search, grouped results with icons, shortcuts and descriptions, loading/empty states and keyboard hints.
Navigation
- TabsUnderline tabs with a sliding ink line, and pill tabs that work as a segmented control. Panels fade and rise in. Document tabs (`TabStrip`) close with × or Delete and leave the view to the caller.
- AccordionA list whose items each open their own panel: a header (the button's name, in a heading) and its content. Panels open at full height at once; only the chevron turns. One quiet fold under a label is a Disclosure. Both turn their chevron with DisclosureChevron, which a row that opens in place uses alone.
- Section navA page's own sections, such as a settings page's: a button or a link per section, with an icon and a trailing count. Its own width sets the layout: a column in a rail, rows that wrap across a narrow page. Rows grow to 44 px on touch screens.
- Resizable PanelsHairline handles that thicken and reveal a grip on hover or drag. Keyboard-resizable, collapsible panels, double-click to reset.
- Page trailWhere a detail page sits, in its title bar: the places above it as links back, then the page's own name as its heading. In a right-to-left language the chevrons point the other way.
- Scroll AreaNative scrolling with slim overlay scrollbars that appear on hover or scroll, and edge fades that grow only when there is more to see.
- SeparatorAccessible hairline dividers — horizontal, vertical, or with a centered label.
Feedback
- ToastBase UI Toast on the kit's surfaces. Bottom-end, inset by --toast-inset-bottom / --toast-inset-x (or `offset`) so it clears docked chrome, on the layer under dialogs and popovers. Semantic icons (never color alone), ink actions, swipe or ✕ to dismiss, F6 to reach the stack. Hover to expand.
- AlertInline callouts, or a bar flush across a pane's top. Subtle tint + hairline, icon carries the tone. Warnings and errors announce themselves.
- ProgressInk fills by default, or the accent tone: progress is one of the accent's few uses, with focus rings and selection. Rings turn amber at 75% and red at 90%, always with the number beside them.
- SkeletonPlaceholders that breathe on the shared 2.2s shimmer rhythm. Static under reduced motion. A LoadingRegion holds them: a busy status named by its label, shown only once the wait is long enough to notice.
- Empty stateEmpty pages, empty lists, zero results: a serif title with one italic word, one clear next step, and a scene per intent that the host gives.
Data
- BadgeSubtle tint, matching ink, never loud. Dots always travel with a word. Info is neutral and leads with its Info icon.
- AvatarImage with tinted-initials fallback — the tint is hashed from the name, so people keep their color everywhere. Presence is announced, not just colored.
- CardSurface, subtle, ghost and interactive. Subtle cards are quieter: a fainter hairline and no shadow. Interactive cards lift a pixel on hover with a spring settle; render them as links or buttons. Flush cards add no padding: divided rows, or a panel the content pads. ItemRow is an item in such a card (icon tile, name, detail, controls) with ItemRowSkeleton for loading; CardRow is the setting-row inset alone. ClampedText cuts long prose to a number of rendered lines with Show more.
- Data tableRecords in rows: a caption, column headers scoped to their columns, the naming column as row headers, figures aligned to the end in tabular figures.
- Panel blocksOne header for every block of a side panel: collapse, reorder by drag or keyboard, remembered.
Code
- MarkdownMarkdown that can stream: unfinished syntax is repaired as it arrives, only the last block re-renders, and code fences render through Shiki without layout jumps. RemoteImageGate holds an image from another site until it is asked for.
- Code blockShiki with the kit's own light and dark themes, switched by CSS, so a theme change never re-highlights. Plain text renders first in the exact same layout, so nothing shifts when colors arrive; streamed code highlights as it comes in.
- Diff viewA file's changes, before and after. @pierre/diffs under the hood, themed with the kit's syntax palette and diff tokens; +/− glyphs so changes never rely on color alone. Unchanged regions collapse (click to expand, or show all from the header); soft wrap toggles per file; split falls back to unified in narrow panes; optional per-hunk actions and inline line comments.