Reference
Components
115 primitives, grouped by what they do rather than by what they are made of. Every one is styled against the token layer, so none of them carries a colour of its own.
Actions
2Button
The system’s action, on the same corner as the field beside it.
FloatingIconButton
A round action pinned to a screen corner.
Forms
14Checkbox
A choice that takes effect when the form is submitted.
ColorPicker
A colour, chosen or typed.
Combobox
A select you can type into.
DatePicker
A date — or a span of them — chosen from a calendar.
Field
A labelled form row: label, control, and the one message below it — and, in row layout, the settings row.
Input
A single line of text entry.
NativeSelect
The platform’s own picker, restyled where it can be.
NumberField
A number, typed or swept to.
RadioGroup
A set of mutually exclusive choices.
Select
A choice from a list, styled the whole way down.
Slider
A value chosen along a range.
Switch
A setting that takes effect immediately.
Textarea
Multi-line text entry, resizable vertically only.
ToggleGroup
A segmented control: several options, one strip.
Navigation
7Accordion
Disclosure rows that open in place.
Breadcrumb
Where you are, as a path.
Collapsible
One thing that opens, on its own.
NavItem
A row in a sidebar.
Pagination
Numbered pages, with the middle elided.
Sidebar
A navigation rail down the side of an application.
Tabs
One strip, several panels.
Overlays
8Command
A filterable list of actions — the ⌘K surface.
ContextMenu
The menu a right-click opens.
Dialog
A modal surface: portal, scrim, centred panel.
DropdownMenu
A menu of actions.
Popover
A panel anchored to a control, holding content you can interact with.
SearchableMenu
A menu of actions you can type into.
Sheet
A panel docked to an edge of the viewport.
Tooltip
A short label on hover and on focus.
Feedback
7Alert
A message about the page, in place.
EmptyState
A collection with nothing in it — yet.
ErrorState
A page that could not be shown.
Progress
A bar that fills, or sweeps when the end is unknown.
Skeleton
The shape of the page, before the page.
Spinner
The one “working” indicator — a ring, never a shimmer.
Toast
A transient confirmation, mounted once near the app root.
Display
17Avatar
A person, as a circle, with initials until the image lands.
Badge
A count or a state, set in mono so it reads as metadata.
Code
A function name or a flag, inside a sentence.
CodeBlock
A multi-line snippet, on a plate, with a way to take it away.
Diagram
A flow or architecture figure, drawn out of the system’s own parts.
FigureBand
A row of counted facts, divided by hairlines and nothing else.
Heading
A heading whose element and whose size are two decisions.
Kbd
A key on a keyboard, set as one.
LinkArrow
The mark on a link that leaves the page.
Markdown
A Markdown string, rendered as this system’s components.
Separator
A rule, in the three weights a monochrome page needs — with words in it when the break has something to say.
StatusDot
The dot beside a status word.
StatusPill
A live state, named: a dot plus an uppercase mono label.
Steps
A numbered sequence, as a rail — one thing after another, with a rule through them.
Tag
A subject label — a topic, a technology, a filter facet — that filters with onClick and is dismissed with onRemove.
Text
The system’s paragraph, on the second rung of the ink ladder.
Timestamp
A date or a time, rendered the one way the system renders them.
Surfaces
9AppShell
Two columns on a desktop, a drawer on a phone.
Article
The long-form reading surface — everything a Markdown pipeline emits, in this system’s type.
AspectRatio
A box that keeps its shape whatever is inside it.
Calendar
A month, as a grid of days.
Card
A bounded surface, with no shadow under it.
DescriptionList
One record’s fields, as a real <dl> rather than a grid of divs.
PageHeader
A page opening: what this page is, and what qualifies it.
ScrollArea
A box that scrolls, with a scrollbar that looks the same everywhere.
Toolbar
The bar of actions at the edge of a working surface.
Data
8BarList
A ranked list, with the bar behind the name rather than beside it.
BigNumber
One number, at the size of a headline.
BulletChart
A measure, its target, and the bands that say whether it is any good.
CalendarHeatmap
A year of daily readings, as a week-by-week grid.
Heatmap
A grid of values read by weight.
Metric
One reading, on a plate: a label, a figure, and what qualifies it.
Sparkline
A run of numbers at the size of a word.
Table
A ruled data table — alignment, sorting and rules all per column.
Charts
15AreaChart
A filled series over a continuous axis, where the area means something.
BarChart
Discrete categories compared by length.
BoxPlot
The spread of a measurement, per category.
ComposedChart
Bars and lines over one axis — the volume, and the rate it moved at.
Facet
The same chart once per group, on one shared scale.
FunnelChart
Stages that only ever narrow.
Histogram
The shape of one distribution.
LineChart
Several series compared over a continuous axis.
PieChart
Parts of one whole.
RadarChart
A profile across several named dimensions.
RadialChart
Values on an arc — a gauge, or a few totals against one scale.
SankeyChart
Where a quantity goes as it moves through stages.
ScatterChart
Two measures against each other, one mark per observation.
TreemapChart
Part of a whole, when the whole has too many parts for a pie — and the parts nest.
WaterfallChart
How a total got from one figure to another.
Diagrams
11ArchitectureFigure
A component map: services, datastores, trust boundaries, and what talks to what.
DataflowFigure
A pipeline: where data comes from, what happens to it, and who ends up with it.
DiagramCanvas
A frame that a picture larger than it can be panned and zoomed inside.
DiagramExportMenu
Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.
DiagramInspector
What the reader just picked, written out beside the picture.
DiagramLegend
The key: which drawn form means which kind of thing.
DiagramMinimap
Where you are in something bigger than the window.
DiagramToolbar
A bar of actions belonging to the surface underneath them.
LifecycleFigure
A state machine: what something can be, and what moves it between states.
SequenceFigure
A call chain over time: who asks whom, in what order, and what comes back.
WorkflowFigure
A process in lanes and phases, with the main path drawn heavier than its branches.
Website
17Actions
Share action menus and a scroll-to-top control.
Collection
Collection headings, search controls, featured records and empty states.
Contact
A correspondence form, contact facts, questions and location imagery.
Content
Formatted code, clipboard actions, step sequences and rich-content elements.
Conversation
Conversation threads, answers, citations, composers and floating chat surfaces.
Evidence
Expandable traces, source stages, scores and timing summaries.
Media
Photograph collections, lightboxes, image details and map controls.
Metrics
Metric panels, accessible data tables and chart arrangements.
Music
Featured recordings, track rows and playlist collections.
Portfolio
An editorial introduction, featured images, records and a question card.
PortfolioIndex
Tabbed collections with a supporting editorial column.
Reading
Article and project layouts, outlines, media and installation instructions.
Recovery
Loading, unavailable and missing-page states with recovery actions.
SearchPalette
Search results, actions and a detail view in one accessible modal.
SiteNavigation
Responsive navigation and explicit language or appearance choices.
SiteShell
Page landmarks, footer groups and shared section headings.
Timeline
Career records, profile narratives and chronological lists.