Reference
Components
Every entry documents its exports, the behaviour worth knowing before you reach for it, live examples with their exact source, and the props table.
Foundations
Actions
Display
Card
Neutral container in four surface treatments; becomes a real link or button when given `href` or `onclick`.
Text
The type ramp. Each variant binds size, line-height and tracking together — headings run tight, labels run small, uppercase and widely tracked.
Badge & Chip
Badge labels a status; Chip is its interactive sibling for filters and selections.
Code & Kbd
The system's second voice: mono for machine-authored fact — ids, paths, timestamps, shortcuts, spec values.
Avatar
Image with initials fallback; the fallback tint is derived from the name, so it is stable everywhere.
Stat & StatusDot
A number with its label and its direction of travel, and the smallest honest way to show a state.
AvatarGroup
Overlapping faces for "these people", with the overflow arithmetic done for you.
EmptyState
The screen before there is anything to show — and the one after a load fails.
Table
Styling and scroll behaviour for a table you write in native markup.
Forms
TextField & Textarea
Text inputs with label, hint, error and adornments — all ARIA wiring handled by the shared Field wrapper.
Select
A styled native `<select>` — the closed state is ours, the open state belongs to the platform.
Checkbox
Square box with a stroked-on tick, an indeterminate state, and a Material touch halo around a 44px target.
RadioGroup
The whole set as one component — one name, one value, one tab stop, plus a card variant for thumbs.
Switch
Pill toggle whose thumb stretches under the finger and springs back, with a haptic on commit.
Slider
Touch-first range control: the thumb grows while dragging, a bubble shows the value, each step ticks.
SegmentedControl
A segmented picker whose selected pill slides between equal-width segments on the emphasized curve.
Feedback
Overlays
Dialog
Modal surface with portal, focus trap, scroll lock and Escape handling already wired together.
BottomSheet
Drag-to-dismiss sheet that follows the finger, rubber-bands at the top and commits on distance or velocity.
Popover & Menu
Anchored surfaces with flipping, viewport clamping and origin-aware entrance; Menu adds roving focus.
Tooltip
Hover/focus label for pointer devices — and nothing at all on touch, by design.
Navigation
Tabs & TabPanels
Sliding indicator measured from the active tab, plus a swipeable panel track for phones.
List & ListItem
The settings/navigation row: leading slot, title and subtitle, trailing value or control.
Accordion
Expandable sections with a height-and-padding collapse on the emphasized curve.
AppBar
Sticky chrome that stays transparent until you scroll, with an optional collapsing large title.
BottomNav
Material 3 navigation bar: a pill grows behind the active icon and the glyph lifts.
Breadcrumb
Where this page sits, and the way back out — collapsing in the middle when the trail is deep.
Layout
Marketing
Data
CircularProgress
A ring for a bounded quantity — context window, quota, upload — whose tone follows the number.
Sparkline, BarChart & LineChart
Change over time and magnitude across categories, with the mark specs, the legend, the tooltip and the table view already decided.
Heatmap
Magnitude across two dimensions — a publishing calendar, an hour × weekday grid, a cohort table.
RankBars
A ranked list where the bar is the second reading of the number: platform mix, top pages, spend by campaign.
Chat
Motion
Reveal & Counter
Entrance animation on scroll, and numbers that animate to their value — both decorative, both able to be switched off without losing content.
Spatial
A navigable 3D stage for floating content: drag to rotate, pinch or ⌘-scroll to zoom, with inertia, keyboard control and a clamped horizon.