Matter components
Thirty-four exports. Six categories. Every card links to a full page with the props introspected from the TypeScript source, every state rendered live, light / dark / forced-colors previewed side by side, and a Copy snippet button on each example.
If you're new here, start with the Primitives row. Every other component in this catalogue is built from those four atoms. Filter by category — the URL updates so your choice is bookmarkable.
Pick the right component
Reach for the smallest thing that does the job.
| If you want to… | Reach for | Don't reach for |
|---|---|---|
| Tag something with a status or version | Pill | Button |
| Render a fixed-width identifier | Pill tone="neutral" | Eyebrow |
| Trigger an action | Button | Pill, <a> |
| Frame a block of content | Card | Sheet (a full-screen overlay) |
| Surface a domain object (filing, grant, board consent) | the matching *Card | a generic Card (loses the lifecycle affordances) |
| Open a side panel | Sheet | Dialog (modal — different intent) |
| Display a code example with copy-to-clipboard | CodeCard | a raw <pre> |
How to use a component
import { Pill } from "@matter/components";
export function Filed() {
return (
<Pill icon="✓" tone="green">
Filed
</Pill>
);
}Every component accepts the underlying HTML element's attributes (className, style, aria-*, event handlers) plus its own typed props. Required props are surfaced in the Props table on each component's page with a red * annotation.
Theming, density, and accessibility
Every component renders correctly under all four conditions:
- Light + dark theme. Tokens are CSS custom properties;
data-theme="dark"on a parent flips them. - Comfortable + compact density.
data-density="compact"reduces vertical rhythm without breaking semantics. Toggle the chrome-level density from the header. prefers-reduced-motion. Animation collapses to opacity or static states.forced-colors(Windows high-contrast). Every component remains usable; semantic shapes survive.
The contract is enforced by Accessibility, tested per-component, and surfaced in every component's Accessibility section.
Source of truth
The list above is generated from packages/components/src/index.ts and packages/brand/src/components/index.ts. Adding a component to either index without a matching apps/design/content/design/components/<kebab>.mdx page fails CI via check-design-drift.ts. The props table on each detail page is generated by generate-props-tables.ts at build time.
For the full catalogue with token references and structured metadata, agents fetch /design-system.json.