Docs

Theming

Components read standard token utilities. Map them onto CSS variables once, then retheme by editing the variables for light and dark.

Tokens

Components use utilities like bg-primary, text-muted-foreground, and border-border. Wire those to --ui-* custom properties with @theme inline:

@theme inline {
  --color-primary: var(--ui-primary);
  --color-primary-foreground: var(--ui-primary-fg);
  --color-border: var(--ui-border);
  --color-muted-foreground: var(--ui-muted-fg);
  /* … */
}

Light & dark

Define the variables on :root for light and .dark for dark. Toggling the dark class on <html> flips the whole UI.

:root {
  --ui-primary: #18181b;
  --ui-border: #e4e4e7;
}
.dark {
  --ui-primary: #fafafa;
  --ui-border: #27272a;
}

Because the design treatments (glass, neo, …) include their own dark: variants, they adapt automatically under the .dark class.

← Installation CLI →