Design system
The components, patterns, and decisions behind our product. Find the right primitive, try its behavior, and carry the same details into your next screen.
Shared primitives
Source-owned shadcn components with Radix behavior.
Local conventions
Real imports, supported APIs, and accessible composition.
Agent-readable
The same reference as Markdown and structured JSON.
Find your building block
34 documented componentsActions
Use one white primary action per task. Outline actions are secondary; ghost actions are quiet; destructive actions require confirmation.
Fields & validation
Keep short, sentence-case labels above controls. Explain errors next to the field and preserve entered values after failure.
Selection
Checkboxes select independent options. Switches apply an immediate setting. Radios choose one option. Toggle groups switch between a small set of views.
Navigation & disclosure
Tabs switch related views in one context. Accordions reveal related sections. A disclosure expands optional detail without navigating.
Overlays & menus
Dialogs contain focused tasks. Alert dialogs confirm consequential actions. Menus offer commands; popovers hold small interactive tools; tooltips provide short supplementary help.
Data & surfaces
Use flat panels for one major surface and cards for repeated objects. Tables compare records; badges emphasize meaningful status; avatars always include a fallback.
Feedback & loading
Alerts explain persistent conditions. Toasts acknowledge completed work. Progress shows measurable work; skeletons preserve the shape of loading content.
Start with the existing system
Use named variants and semantic tokens. Keep forms, focus, pending states and mobile behavior intact. Compatibility adapters preserve existing product contracts; new independent UI starts with declarative primitives.
Read the foundations