Theming

The components have no theme layer of their own. They read shadcn/ui’s CSS variables, so your colours and your dark mode apply as soon as they land.

The tokens they read

Change one in your global CSS and the components follow, in light and dark.

Variable	Its role in shadcn/ui
--background--foreground	Default background and text.
--primary--primary-foreground	Primary actions. Usually your brand.
--muted--muted-foreground	Muted backgrounds and secondary text.
--accent	Hover and highlighted backgrounds.
--border	Borders.
--ring	Focus rings.
--popover--popover-foreground	Popovers and menus.
--card--card-foreground	Cards.
--destructive	Destructive actions.
--chart-1--chart-2--chart-3--chart-4--chart-5	Charts.

Customise your theme

Colours, dark mode and fonts live in your global CSS, the same file shadcn init wrote. Anything else is a class in the component’s own source, which is yours once it is installed.

Your brand colour

Set --primary, the text on it and the focus ring, with a separate value for dark. Any colour format works.

app/globals.css11 lines

:root {  --primary: oklch(0.55 0.2 260);  --primary-foreground: oklch(0.99 0 0);  --ring: oklch(0.55 0.2 260);}.dark {  --primary: oklch(0.65 0.18 260);  --primary-foreground: oklch(0.99 0 0);  --ring: oklch(0.65 0.18 260);}

Your neutrals

Backgrounds, text greys and borders come from the same file.

app/globals.css7 lines

:root {  --background: oklch(0.99 0.004 90); /* a warmer page */  --foreground: oklch(0.25 0.01 90);  --muted: oklch(0.96 0.006 90);  --muted-foreground: oklch(0.5 0.01 90);  --border: oklch(0.9 0.008 90);}

03
Or paste a whole shadcn theme
Any theme made for shadcn/ui works, from shadcn’s themes or a generator like tweakcn, because these are the variables those themes set.
04
A different colour for one section
Variables set on an element apply to everything inside it, so a pricing section or a dashboard panel can carry its own brand.
pricing.tsx3 lines
<section style={{ "--primary": "#0f766e", "--ring": "#0f766e" } as React.CSSProperties}> <PricingToggle value={billing} onValueChange={setBilling} /></section>
05
Corners
Corners are Tailwind classes in each component’s file. In a shadcn project rounded-sm to rounded-xl follow your --radius; to change any other, like rounded-full on a pill, edit the class.

Status colours

Error, success and warning colours are classes in the component’s file too. Replace them to use your theme’s.

components/waitlist-field.tsx6 lines

// components/waitlist-field.tsx, the "Enter a full email address" hint// beforeclassName="… text-red-600 … dark:text-red-400"// after: your theme's destructive colourclassName="… text-destructive …"

07
Fonts
Components inherit the font of the page they sit in; code and counters use font-mono. Set your fonts once, on body and in Tailwind’s --font-mono.
08
One instance
Every component takes className for its outer element: width, spacing or a one-off colour.
settings.tsx1 lines
<StatusButton className="w-full" status={status} onClick={save} />

Dark mode

It is shadcn’s: a .dark class on <html> swaps the variables and the components follow. Use next-themes or your own toggle.

Try a brand

Three real components inside a box that sets only --primary, --primary-foreground and --ring, plus the light or dark set.

Pro

/mo

Billed monthly

Hear when the next release ships

Plan changes apply today.

app/globals.css11 lines

:root {  --primary: #305dde;  --primary-foreground: #ffffff;  --ring: #305dde;}.dark {  --primary: #4a76ec;  --primary-foreground: #ffffff;  --ring: #4a76ec;}