Components
25 primitives, each in light and dark with variants, props, and copy-paste code.
Actions
Inputs
Surfaces
Panel title
Frosted glass surface with a hairline eyebrow header.
Panel
The workhorse surface — a frosted glass panel with an optional eyebrow header and actions.
Interactive card
Hover me — the hairline lights to the accent.
Card
An interactive surface whose hairline lights to the accent on hover — for grids of clickable items.
Popover & Menu
A click popover over an opaque surface; fill it with MenuItems for dropdown menus. Closes on outside click or Escape.
Overlay (Modal & Drawer)
A modal or edge drawer over a frosted scrim, animated with a spring. Escape and scrim-click dismiss it.
Data display
Chip
A palette-aware pill. Meaning is carried by state colour; each variant re-skins per theme. Optional dot and pulse.
Tag
An uppercase monospace tag for codes, IDs, and versions.
Severity pill
An inline severity chip — icon + band label, with an optional count. Backed by the four-step severity ramp.
Stat
A severity stat card with a top accent rule and a big tabular number.
Stat pill
A compact KPI cell — a labelled value with a tone keyline down the left edge.
Status dot
A small status dot in a tone, with an optional pulse for live states.
Avatar
A round avatar — one of the few rounded shapes — with an image or initials fallback.
Feedback
Skeleton
Shimmering placeholders for loading states — single blocks, text lines, rows, or a whole panel.
Spinner
An inline loading ring that inherits the current colour, so it shows on any surface — including the yellow button.
Empty state
A centered placeholder with an icon, title, optional sub-line, and an action — for empty lists and zero states.
Tooltip
A minimal hover/focus tooltip over an opaque surface.
Toast
Transient notifications that spring in from the corner. Fire them with useToast(); mount ToastProvider once.