Living reference

Design system

Every base component with its states. Rules and tokens live in docs/design.md.

Button

ui/components/base/button.tsx

Pills that press to 0.97. Loading keeps width and focus, and swaps the label for a spinner with a soft blur.

ui/components/base/field.tsx · form.tsx

Base UI wires labels, hints and validity. Errors fade in under the input; the form blocks invalid submits and focuses the first problem.

ui/components/base/badge.tsx · spinner.tsx · switch.tsx

Small status and toggles. The switch thumb stretches while pressed.

NeutralMintOpen nowOverdue

Email reminders

ui/components/base/tabs.tsx

Segmented control. The indicator glides; panels fade in.

Six bookings, two courts free after 6pm.

ui/components/base/menu.tsx · dialog.tsx · drawer.tsx · toast.tsx

Menus grow from their trigger; dialogs stay centred; drawers follow your finger; toasts stack and expand on hover.

motion/react · ui/motion/presets.ts

Items fade in and out. Motion here is opacity first: position and size change only when they carry meaning (drawers, tab indicators).