Theming · dsgn

Make it yours.

Every component in the registry — all 23 of them — reads color from exactly 16 CSS custom properties. No component hardcodes a hex value; every bg-primary, text-foreground, or border-border class is Tailwind resolving to a variable. Change the 16 variables in your own globals.css and every installed component re-themes at once — no component file needs to be touched, no matter how many you’ve already customized.

The 16 tokens

--backgroundPage background

--foregroundDefault text color

--cardCard / Frame surface background

--card-foregroundText on a card surface

--primaryPrimary button fill

--primary-foregroundText on a primary button

--secondarySecondary button / muted surface fill

--secondary-foregroundText on a secondary surface

--accentThe one brand color — links, focus rings, the accent Button variant

--accent-foregroundText on an accent-filled surface

--mutedLow-emphasis fill (disabled states, subtle backgrounds)

--muted-foregroundLow-emphasis text (captions, placeholders)

--destructiveDestructive button fill, error Alert border

--destructive-foregroundText on a destructive surface

--borderEvery component's border color

--ringFocus-visible ring color

A minimal starting palette

This is the same shape shadcn/ui’s own default theme uses — drop it into your project’s global stylesheet (wherever @import "tailwindcss" lives) and every registry component picks it up immediately, no config file needed.

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #171717;
  --accent: #2563eb;
  --accent-foreground: #fafafa;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;
  --border: #e4e4e7;
  --ring: #2563eb;
}

Dark mode

Re-declare the same 16 variable names under whatever selector or media query your project uses to trigger dark mode — a .dark class, a [data-theme="dark"] attribute (this site’s own approach — see apps/site/app/globals.css for the real example), or a plain @media (prefers-color-scheme: dark) block. Nothing about the components themselves changes — they only ever reference the variable names, never a specific theme.

← See the components these tokens drive