Theme tokens
ShadNG uses a two-tier token system — primitives → semantics — fully shadcn-compatible. Rebrand the whole library by editing the primitive palette, or remap dark mode by overriding semantics inside .dark.
Why two tiers
Primitives are the raw palette and base radii — pure colors and numbers with no semantic meaning (--color-gray-500, --radius-base). They never change between light and dark mode.
Semantics are what components consume — --background, --foreground, --primary, etc. Dark mode just remaps these. Names match shadcn 1:1, so existing shadcn themes work as-is.
ShadNG does not ship component-specific tokens. If a future AI component needs a surface that doesn't fit the existing semantics, the right move is to add a new semantic token shared by every consumer — not a component-scoped one.
Install
@import 'tailwindcss';
@import '@shadng/core/theme.css';The import order matters — tailwindcss first, then the theme.
Primitives
Pure palette + base scale. Edit these to rebrand globally.
| Name | Type | Description |
|---|---|---|
| --color-gray-50 … 950 | palette | 11 gray steps in OKLCH. Used by semantics in light and dark. |
| --color-red-400 / 500 | palette | Destructive accents. Light uses 500, dark uses 400. |
| --radius-base | scale | 0.625rem (10px) — anchor for all derived radii. |
| --radius-sm / md / lg / xl | scale | Derived as 0.6× / 0.8× / 1× / 1.4× of base. |
Semantics
What components actually consume. Edit .dark overrides to retune dark mode.
| Name | Type | Description |
|---|---|---|
| --background / --foreground | surface | Default page background and primary text. |
| --card / --card-foreground | surface | Elevated container surface. |
| --popover / --popover-foreground | surface | Dropdowns, menus, popovers. |
| --primary / --primary-foreground | action | Submit button, primary CTA. |
| --secondary / --secondary-foreground | action | Secondary buttons, badges. |
| --muted / --muted-foreground | state | Disabled or de-emphasized content. |
| --accent / --accent-foreground | state | Hover and pressed states. |
| --destructive / --destructive-foreground | state | Error states, dangerous actions. |
| --border / --input | border | Component borders. Input is slightly stronger. |
| --ring | focus | Focus ring color. |
Rebrand examples
Global brand color change — edit primary semantic in :root:
:root {
--primary: oklch(0.5 0.2 250); /* your blue */
--primary-foreground: oklch(0.985 0 0);
}Custom dark mode tint — override semantics inside .dark:
.dark {
--background: oklch(0.12 0.02 250); /* deep blue-tinted dark */
--foreground: oklch(0.95 0 0);
--primary: oklch(0.7 0.15 250);
}Reduced motion
The theme file also ships a global prefers-reduced-motion override. All animations and transitions are reduced to 0.01ms for users who request it — works automatically with the rest of your app's CSS.