Customization & Theming

Components reference semantic CSS variable tokens. Change the variables to change every component.

How It Works

1. CSS variables defined in :root (light) and .dark (dark mode).
2. Tailwind maps them to utilities: bg-primary, text-muted-foreground, etc.
3. Components use these utilities — changing a variable changes all components that reference it.

Color Variables

Every color follows the name / name-foreground convention. The base variable is for backgrounds, -foreground is for text/icons on that background.