Theming
Tokens, fonts, and dark mode live in the package CSS. Customize with CSS variables, not by forking components.
Tokens
Semantic colors are defined on :root and .dark.
| Token | Light |
|---|---|
| --primary | #065774 |
| --primary-hover | #00B6E5 |
| --primary-disabled | #83BACC |
| --foreground | #3A3A3A |
| --muted-foreground | #A8A8A8 |
| --border | #EBEBEB |
| --background | #F9F9F9 |
| --success | #00A63E |
| --destructive | #DA373E |
| --warning | #F79008 |
| --radius | 0 |
Fonts
Manrope for UI, Darker Grotesque for headings, Inter for body and inputs. The CSS import loads the font files.
Radius
--radius is 0. Corners are sharp. Circular controls keep rounded-full.
Dark mode
Use the theme toggle in the header, or add the dark class on an ancestor, usually <html>.
<html class="dark">