ComponentsOverview
Twenty-three components. Each one a real artifact.
Every component on this site is a real artifact from the production codebase. The code snippets on the component pages are the actual code that ships — sometimes abbreviated for length, never simplified for clarity.
How to read a component page
Every component page in this section follows the same template. A short description of what the component is and when to use it. A live demo showing the default and the variants. A code block with the actual implementation. A props table. An accessibility section. A "when not to use it" section, because most components have at least one.
The seven groups
Buttons, icon buttons, links, and the affordances that move a user forward.
Form fields, controls, and the chrome that turns a form into a conversation.
Alerts, toasts, and badges — the system's way of saying something to the user.
Cards, callouts, figures — the components that hold and present content.
Site header, footer, back-to-top, breadcrumbs — the wayfinding chrome.
Tables, metrics, and study data — the components that make numbers honest.
Three things all components share
- Built from tokens, never raw values. A component file that has a
#[0-9a-f]{3,6}in it is broken. Use a token. - Accessible by default. A component ships with the right ARIA, the right roles, the right focus ring, and the right keyboard behavior. If accessibility is a feature flag, the component is wrong.
- Live demos, never screenshots. Every demo on a component page is a working instance of the component. A screenshot is a description; a demo is the component.