Customisation
Design Tokens
ComposeKit renders inside a .bp-composekit root. Call ComposeKitClient.setTheme() at any point to override CSS custom properties scoped to that root — it never touches the rest of your app's styles.
How it works
Tokens are CSS custom properties (
Tokens are CSS custom properties (
--primary, --radius, etc.) written inline on the .bp-composekit element. Color values can be hex, hsl(), rgb(), or any valid CSS color. Changing tokens at runtime re-renders all widgets automatically — no page reload.Token map
| Token key | CSS variable | Controls |
|---|---|---|
primary | --primary | Buttons, active states, links |
primaryForeground | --primary-foreground | Text on primary backgrounds |
secondary | --secondary | Secondary button backgrounds |
secondaryForeground | --secondary-foreground | Text on secondary backgrounds |
background | --background | Page background |
foreground | --foreground | Default body text |
card | --card | Card background |
cardForeground | --card-foreground | Card text color |
popover | --popover | Popover / dropdown background |
popoverForeground | --popover-foreground | Popover text color |
muted | --muted | Subtle backgrounds |
mutedForeground | --muted-foreground | Placeholder / helper text |
accent | --accent | Hover / accent backgrounds |
accentForeground | --accent-foreground | Text on accent backgrounds |
destructive | --destructive | Error / delete actions |
border | --border | Card and layout borders |
input | --input | Input field border color |
ring | --ring | Keyboard focus ring color |
radius | --radius | Border radius (e.g. 0.5rem) |
fontFamily | --default-font-family | Base font family |
spacing | --spacing | Base spacing unit |