Theming

Components look right in any shadcn app with nothing extra installed. Keep your palette, borrow it with one class, or set Lumen's tokens yourself. Brand names, logos and sample text are props, so nothing of ours ends up in your product.

Your palette or Lumen's

Out of the box, components use neutral ink: black in light mode, white in dark, like shadcn's default. Charts keep their own indigo so data stands out. Your --foreground, --border and --font-sans always carry through.

• One brand colour: set --lumen-accent. Set --lumen-accent-foreground too when text on it should be dark (a light accent), and --lumen-accent-text for the accent as text on your background.
• Chart colour: --lumen-chart-accent (the series stay --lumen-series-1 to -6).
• Your shadcn palette: add the lumen-inherit class to any ancestor (your <html>, or one section). The accent becomes your --primary (with --primary-foreground on it), charts your --chart-1 and series your --chart-N, errors your --destructive, focus your --ring.
• One part of a page: add the lumen-scope class to its container and set the tokens there.
• Story chart glow: finish="flat" on a chart, or --lumen-glow from 0 to 1 to dial it.

/* Your shadcn palette: add class="lumen-inherit" to <html> (or any section). */

/* Or set Lumen's own tokens: */
:root {
  --lumen-accent: #0e9f8e;
  --lumen-accent-foreground: #ffffff;
  --lumen-chart-accent: #6b74f5;
}
.dark {
  --lumen-accent: #2dd4bf;
  --lumen-accent-foreground: #0b0c10;
}
.brand-area.lumen-scope { --lumen-accent: #db3f74; }
.quiet-charts { --lumen-glow: 0.4; }

Keep overrides in your own CSS. Each add (and every --overwrite update) writes the registry's CSS into your global stylesheet again, so edits inside the installed Lumen rules are lost. Put your overrides in rules of your own, after them or in a separate file.

Dark and light

Lumen ships both, with separate art direction rather than inverted colours. It follows a .dark class on an ancestor (the shadcn and next-themes convention). Set that class before the first paint (next-themes does) and there is no flash on load.

If your app switches themes with a data-theme attribute instead, set the .dark class as well (with next-themes, attribute={["class", "data-theme"]}). Lumen's own tokens also read [data-theme="dark"], but the Lumen theme's shadcn tokens and Tailwind's dark: variant, as shadcn sets it up, follow .dark only.

The Lumen theme (optional)

The theme is global. It replaces your app's shadcn tokens (--background, --primary, --border and the rest, in light and dark) with Lumen's and adds Geist and Geist Mono, so every shadcn component in the app changes, not just Lumen ones. Skip it to keep your palette: components look right without it. Commit first so you can review the diff.

npx shadcn@latest add https://beautiful-ui.dev/r/lumen.json

Next: Motion, to tune or switch off animation.