Colours
Components read colours by name through
useKit(), not by hex in each file. Change tokens once in KitProvider (or your kit-theme bridge) and every copied component follows.One rule
Use the token: colors.accent, colors.mutedForeground. Avoid sprinkling literals in component files you own — those stop following the theme when you switch light / dark or rebrand.
Tokens
| Prop | Type | Default |
|---|---|---|
| background / foreground Page fill and primary text. | string | kit default |
| card / cardForeground Raised surfaces: inputs, cards, sheets, toasts. | string | kit default |
| muted / mutedForeground Quiet fills and secondary copy. | string | kit default |
| border / input Hairlines and field outlines. | string | kit default |
| primary / primaryForeground Default solid buttons. | string | kit default |
| accent / accentForeground Brand colour — focus rings, selection, accent buttons. | string | kit default |
| success / warning / danger Status and validation. | string | kit default |
| overlay Scrim behind sheets and dialogs. | string | kit default |
Full defaults, radius, fonts and motion: Theming. Mapping from an existing design system: Bring your design system.
Brand accent
src/app/_layout.tsx
import { KitProvider } from "@/lib/kit"; <KitProvider accent="#6366f1" radius={14} scheme="system"> <Stack /></KitProvider>accent drives focus rings, selected states and variant="accent" buttons. Light and dark each compute readable accentForeground for you.