All components
37 components across 7 groups. Each page carries live examples, a props table, guidance and accessibility notes — all generated from one spec object, so the docs can't drift from the package.
Actions
ButtonTriggers an action. State is carried by a step on the neutral ramp rather than by movement — nothing translates on press, because motion should acknowledge input, not perform.IconButtonA square button holding a single glyph. The label prop is required, not optional.ButtonGroupA segmented row sharing one border and one shadow, so the set reads as a single object rather than three stacked ones.LinkNavigates. Underlined by default at 2px, because colour alone is not enough to mark a link in running text.
Forms
FieldA labelled text input with its hint and error wired up. Label, control and message are one component so they cannot drift apart.TextareaMulti-line text. Resizes vertically only — horizontal resize breaks the grid.CheckboxAn independent on/off choice, applied when the form is submitted. For something that takes effect immediately, use Switch.RadioGroupOne choice from a short visible set. More than about six options wants a Select.SwitchA setting that takes effect the moment it's flipped. If the change only lands after a Save, it's a Checkbox.SelectA styled single-choice picker. Costs a popover, a focus trap and a scroll lock — on touch, NativeSelect is usually better.
Feedback
AlertAn in-page message about what the user is looking at. Carries a glyph as well as a colour, so the tone survives greyscale.SpinnerIndeterminate waiting. For anything with measurable progress use ProgressBar; for content loading into a known shape, Skeleton.ProgressBarMeasurable progress. Omit the value for an indeterminate bar.SkeletonA placeholder in the shape of the content that's coming. Match the real layout, or the swap will jump.EmptyStateNothing here yet. Say what would be here and how to put it there — the dashed border marks a space waiting to be filled rather than a failure.
Data display
CardA surface, a hairline, and nothing else. Depth is one step on the neutral ramp — there is no elevation ramp and no shadow, which is why each theme's ramp has eleven steps.BadgeStatus, read not clicked. A tint plus theme ink rather than a saturated fill — quiet enough to annotate without shouting.TagA value the user put there, optionally removable. Sentence case, unlike Badge — it's content, not status.AvatarA person or an account. Falls back to initials derived from the name.TableRows and columns, always inside its own horizontal scroller so a wide table never makes the page scroll sideways.DescriptionListLabel and value pairs. For repeating rows of the same shape, use Table.StatOne headline number. `direction` colours the delta — note it describes the movement, not whether the movement is good.Code & KbdInline code, a code block, and keyboard keys.
Navigation
BreadcrumbWhere this page sits. The last item is the current page — not a link.PaginationPrevious and next with a position readout. No page-number strip — it's the part people misclick and it stops scaling past a few dozen pages.NavListA vertical list of links, optionally grouped. The current page gets an accent rail.TabsAlternate views of one subject. If the panels aren't variations on the same thing, that's navigation, not tabs.AccordionCollapsible sections. Single mode is collapsible, so the open item can be closed again rather than being a one-way door.
Overlay
DialogA modal decision. Overlays are the one place a shadow exists in this system — a surface that genuinely leaves the page earns it; a card does not. The scrim is a flat tint of ink, never a blur.PopoverExtra content anchored to a control, without blocking the page. For a decision that must be made now, use Dialog.TooltipSupplementary text on hover or focus. Never appears on touch and never takes focus — so nothing essential can live here.MenuA list of actions from a trigger. Not navigation, and not a form control — for choosing a value, use Select.
Layout
StackVertical rhythm as a property of the container. Children never carry margins — margins collapse and double, gaps don't.ClusterA horizontal group that wraps. Button rows, badge rows, toolbars.GridTakes a minimum column width rather than a column count, so it reflows on narrow screens without a single media query.Section & PagePage centres a column at the container width with the gutter. Section is a titled block with an eyebrow, heading and description.DividerA rule between groups. Reach for spacing first — a divider is for when spacing isn't enough.