Guides
Design tokens
Semantic CSS variables mapped to Tailwind tokens. Never hardcode hex values in components.
| Token | Use |
|---|---|
| --background | App canvas |
| --foreground | Primary text |
| --card | Card surfaces |
| --muted-foreground | Secondary text |
| --border | Default borders |
| --primary | Primary actions |
| --ring | Focus rings |
Install theme
bash
npx shadcn@latest add https://livedocs.xyz/r/theme.json