Getting started

Theming

Every component takes its colors, corners, type and motion from a few CSS variables in tokens.css. Change them once and everything follows.

Try it

Add your choice after tokens.css:

:root {
	--ui-accent: light-dark(#047857, #34d399);
	--ui-on-accent: light-dark(#ffffff, #022c22);
	--ui-radius: 0.5rem;
	--ui-radius-control: 0.5rem;
}

Corners

Surfaces and controls round separately. --ui-radius shapes cards, menus and dialogs; --ui-radius-control shapes buttons, fields and tags. Set the control radius to 999px for pill-shaped controls while cards keep their corners.

Dark mode

Every color is a light-dark() pair, so pages follow the reader's system setting. To let people choose, set data-theme="light" or "dark" on <html>.

When you change a color, give both halves: light-dark(#4338ca, #a5b4fc). Check that text on it reads at 4.5:1 in each.

Type

Components use --ui-font for text and --ui-font-mono for code. Load your fonts as usual, then point these at them.

Text inside components follows your page's font. tokens.css sets the page to --ui-font only when your app doesn't set its own. If it does (Tailwind sets one), the components take your app's font. To use --ui-font everywhere, add html { font-family: var(--ui-font); } after your own CSS.

With Tailwind

Components work alongside Tailwind's reset with nothing to configure: they set their own borders, spacing and list styles. Their CSS is scoped, so Tailwind classes in your markup don't change them.

All tokens