DocsGetting StartedTheming
Theming
Tokens, density, borders, surfaces and runtime appearance.
Loading documentation…
Every visual decision is a CSS variable. Change them in CSS, or let users change them at runtime like in a desktop app.
| Token | Purpose |
|---|---|
--background … --ring | shadcn names, OKLCH values |
--radius | Base corner radius; sm/md/lg/xl derive from it |
--density | 0.82 / 1 / 1.2 multiplier for control and row heights |
--border-width | 0.5px hairline or 1px |
--surface-1…3, --surface-shadow | Elevation steps; flat or raised |
--success / --warning / --info | Status colors with foreground pairs |
--level-debug … --level-error | Log level colors |
--chart-1 … --chart-5 | Series palette |
--font-scale, --font-family-sans | Type scale and family |
Everything on this page updates live.
Components size themselves with the density variable, so one setting retunes the whole UI.
className="h-[calc(2rem*var(--density))]"
import { applyAppearance, defaultAppearance } from "@/lib/appearance"
applyAppearance({ ...defaultAppearance, density: "compact", accentHue: 280 })