Components

A small uppercase label above a heading, in the display font.

A semantic h1-h6 whose visual size from the type scale is independent of its level.

An anchor that opens external URLs in a new tab with an icon and a screen-reader announcement.

A bulleted, numbered or marker-styled prose list (ul/ol) with token-based spacing and marker colour; check, dash or none markers keep list semantics.

An item (li) inside a List; plain li elements work too.

An Eyebrow in the muted tone.

Body text with a size, tone and element of your choice.

The built-in geometric 16/20px line icon set, plus custom { path, viewBox } definitions and snippets. Custom path strings are injected with {@html}: sanitising anything untrusted is the consumer's responsibility.

Filled, tonal, outlined and minimal buttons with intents, sizes, icons and a loading state. Renders a link when given an href.

Joins buttons into one segmented bar, horizontal or vertical.

A menu opened by right-click, long-press or Shift+F10 on any content.

A keyboard-navigable menu with icons, shortcuts, checkable items, dividers, headings and nested submenus.

A button that opens a menu (with nested submenus) and returns focus when it closes. Extra attributes such as data-testid go to the trigger button.

A compact single-choice switch (radiogroup) with arrow-key navigation.

A primary action with a dropdown of related actions, Blueprint-style.

An ARIA toolbar: one tab stop with arrow-key roving focus across buttons, selects and segmented controls, plus separators.

A separator between groups of controls in a Toolbar.

Inline click-to-edit text, single or multi-line.

Label, helper text, error and required marker around any control; stacked or inline.

A 32px text field with label, hint, error, icon and trailing slots.

Static text or an icon attached to an input inside an InputGroup (e.g. https://, $, .com).

Joins inputs, selects, pickers and buttons into one seamless control with shared borders and corners.

A numeric field with steppers, min/max clamping and arrow-key stepping.

A multi-line field that can auto-grow with its content.

A checkbox with indeterminate state and an optional hint. Extra attributes go to the native input, which overlays the visible box so test tools can check() it directly.

A wrapping group of toggle chips: single or multi-select, with an optional empty state.

Saturation/brightness square, hue and opacity rails, hex entry, swatches and an eyedropper.

Autocomplete input: local or async (debounced, abortable) suggestions, optional free text.

Tags with autocomplete, async options and on-the-fly creation.

A group of radio buttons, vertical or horizontal. Extra attributes go to the fieldset; an option's attrs go to its native radio input, which overlays the visible dot.

A dropdown with a filterable listbox. No native <select>.

Single-value or dual-thumb range slider with steps, tick marks and keyboard control.

An on/off toggle (role=switch). Extra attributes go to the native input, which overlays the visible track so test tools can check() it directly.

Free-form tags: Enter, comma or paste; validation and duplicate control.

A pill button with a pressed state (aria-pressed), for filters and toggles.

A month grid for a single date or a range, with bounds, disabled dates and full keyboard navigation.

A text field with a calendar popover. Accepts typed ISO and US dates.

Start and end dates in one control, with presets and a range calendar.

A date and a time bound to one YYYY-MM-DDTHH:MM value.

A date-time range chosen in a single popover: presets, range calendar, two time lists and Apply/Cancel.

Durations as text (1h 30m, 1:30, PT1H30M) or a stepper popover with presets.

Typed time entry (2:30 pm, 1430) plus hour/minute columns; 24h or 12h.

Start and end times, with overnight-range handling.

Drag-and-drop zone with validation, per-file progress, cancel and retry.

Stacked collapsible panels, single or multiple open.

Holds children to a fixed aspect ratio (number or "16/9").

A full-width page section on a tonal background (surface, container or primary) that wraps a Container.

A composable surface: media, header, body, footer and actions; can be a link (with valid inner actions) or a button.

Wrapping horizontal flex for tags, buttons and inline groups.

A centred, width-capped wrapper with token gutters that hold down to 320px.

A horizontal or vertical rule, optionally labelled.

A translucent panel floated over a full-bleed canvas at a corner: stacks with measured offsets, can fade while the pointer is in the centre (kept on hover, drag and focus), and tucks away with a touch toggle.

A page footer (contentinfo landmark) with start, centre and end regions (or brand, meta and links) that stack on narrow widths; optionally aligned to the Container width.

Auto-fill columns from a minimum width; reflows without media queries.

A drag-and-resize tile grid for dashboards: snapping, vertical compaction, responsive columns and a full keyboard move/resize model with live-region announcements.

A page-level hero: eyebrow, display-font title, lede, actions and media, left-aligned or centred.

A top bar with a brand (optionally a home link), start, centre and end regions and a collapsible menu; optionally aligned to the Container width. Extra attributes go to the header; startAttrs, centerAttrs and endAttrs go to the regions.

A card with a titled header, actions, and optional collapsing. Formerly Section, which remains as a deprecated alias.

The application frame: header, collapsible sidebar, resizable aside and status bar, responsive down to a drawer.

Vertical navigation with headings, groups, badges, per-item shortcut tooltips, custom icons and attrs, and an icon-only collapsed mode. Extra attributes go to the nav element.

A link, hidden until focused, that jumps keyboard users past repeated chrome to the main content (the target needs tabindex="-1").

Two resizable panes by drag or keyboard; nests without double borders.

Children in a vertical flex column with a token gap.

A trail that collapses its middle into a menu when long.

A link for navigation bars: aria-current="page" and an active style when current; a plain anchor, so client routers handle it. The inline variant drops the padding for compact link groups such as a footer.

A labelled nav landmark wrapping a list of links, horizontal or vertical; the inline variant is for footers.

A multi-step progress indicator, horizontal or vertical.

Line, pill or document tabs with arrow-key activation and lazy panels. The document variant adds closable, dirty and link tabs, drag and keyboard reordering (Ctrl+Shift+Arrow), overflow scrolling with an all-tabs menu, and a context menu.

A keyboard-complete tree with tri-state checkboxes, lazy children, multi-select, virtualization, drag-and-drop moves and node menus.

A confirmation dialog (role=alertdialog) with intent and Cancel/Confirm.

A modal fuzzy finder over registered commands and async providers, with groups, recents and full keyboard support.

A modal dialog on the native <dialog> element with header/body/footer divisions.

Premade replacements for the browser's alert(), confirm() and prompt(): mount once, then await dialogs.alert/confirm/prompt() anywhere.

A modal panel sliding from the left, right or bottom.

A controlled tooltip that follows the pointer inside a container: for canvas and SVG marks, map features and any hover target you cannot wrap in a Tooltip. It flips at the container edges and never takes pointer events.

A preview card on hover intent, focus plus Enter or long-press: a non-modal dialog with optional async loading and a skeleton.

Renders a key combination (mod+shift+p) as one kbd per key, with Cmd on Apple platforms and Ctrl elsewhere.

The anchored surface behind every dropdown: flips, closes on outside press and Escape, optionally viewport-fixed.

A dialog listing every registered shortcut, opened with ?.

A hover and focus hint that flips to stay on screen; can show a shortcut as keys or rich, non-interactive content.

An image or initials with a stable colour and optional status dot.

Overlapping avatars with a +N overflow.

A small status pill with an intent colour.

Sortable, resizable, filterable grid with selection, tree rows, pagination or virtual scrolling with infinite loading, typed columns, row actions, copy and export.

A description (dd) inside a DescriptionList.

Semantic dl/dt/dd key-value pairs from an items array or DescriptionTerm/DescriptionDetail children; stacked, inline or grid, with optional dividers.

A term (dt) inside a DescriptionList.

A fixed-ratio image frame with no layout shift and a placeholder shown until load and on error.

A before/after image comparison: a draggable, keyboard-operable divider (horizontal or vertical), a transparency checkerboard, and split, side-by-side, before and after modes with an optional built-in switcher.

A removable or clickable chip.

A vertical sequence of timestamped events.

An inline banner with intent, title, actions and dismiss.

A friendly “nothing here” with icon and actions.

A linear progress bar, determinate or indeterminate.

Shimmering placeholders for text, blocks and avatars, plus table, tree, card and page-header layout presets.

Indeterminate or determinate circular progress.

Renders the toast queue. Mount once; call toasts.success()/warning()/danger() anywhere. Extra attributes go to the region element.

Grouped, stacked and 100% stacked bars, horizontal or vertical, with negatives and value labels.

A gradient legend for continuous colour scales: caption, low/high (and optional mid) labels, sequential or diverging palette, horizontal or vertical.

A canvas density plot for 10^5 to 10^6 points: a binned heatmap when zoomed out, individual markers when zoomed in, with pan, zoom, hit-test tooltip and a binned table view.

A donut with legend toggles and an “Other” fold-in past 8 slices.

Binned distributions with drag-to-brush range selection.

Line, area, stacked and 100% stacked area charts: dates or numbers on x, gaps for missing values, direct labels, crosshair tooltip, table view.

Scatter plots with optional size and group-colour encoding, hover and arrow-key readout, and a table view.

A tiny inline trend line.

A KPI tile: big number, label, colour-and-arrow delta vs the previous period and an optional sparkline.

A node/edge editor: pan, zoom, drag, connect ports, minimap, custom node components and five edge routers.

An OpenLayers map styled by the design tokens: markers, GeoJSON, popups, themed controls and dark-mode tiles.