Components

A library of 22 React components, built for this site on its design tokens. Each one has its own page, with a live example and its code, every variant, its props, its tokens and how it works with a keyboard and assistive technology.

On this page

Principles
Usage
How it's tested
Source

Principles

Every visual value comes from a design token: no raw colors, sizes or durations.
Web Content Accessibility Guidelines (WCAG) 2.2 AA is the floor, for every component and every example.
Few components, each configurable. Behavior and ARIA are automatic by default and can always be overridden.
Native props go through to the root element, so a component works like its element.
Restyling goes through each component's own tokens, never through its class names.

Usage

Import a component from its folder and render it like any React component.

SaveButton.tsx

import { Button } from "@/components/Button";

export function SaveButton() {
  return <Button variant="primary">Save changes</Button>;
}

To restyle one, override its --component-* tokens on a wrapper class. Each component page lists its tokens.

CSS

.brand {
  --component-button-primary-background: var(--color-accent-text);
  --component-button-primary-border: var(--color-accent-text);
}

How it's tested

Unit tests for every component, including its keyboard use and accessible names.
axe accessibility checks, in unit tests and in the browser.
Browser tests with Playwright in Chromium and WebKit.
Props tables kept in step with the components' types by the type checker.
A registry test that fails if any library export has no docs page.

Source

Read the library's source on GitHub.

Next Button