shadcn/ui theme generator for Tailwind CSS v4
Pick a brand color, neutral and radius to get a complete shadcn/ui theme in OKLCH for light and dark, with chart and sidebar colors. Preview it, copy the CSS.
Light
Upgrade to Team
Unlimited projects, SSO and priority support.
Dark
Upgrade to Team
Unlimited projects, SSO and priority support.
:root {
--radius: 0.625rem;
--background: oklch(1 0 286);
--foreground: oklch(0.145 0.008 286);
--card: oklch(1 0 286);
--card-foreground: oklch(0.145 0.008 286);
--popover: oklch(1 0 286);
--popover-foreground: oklch(0.145 0.008 286);
--primary: oklch(0.586 0.233 281.4);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0.006 286);
--secondary-foreground: oklch(0.205 0.008 286);
--muted: oklch(0.97 0.006 286);
--muted-foreground: oklch(0.52 0.012 286);
--accent: oklch(0.97 0.006 286);
--accent-foreground: oklch(0.205 0.008 286);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0.006 286);
--input: oklch(0.922 0.006 286);
--ring: oklch(0.666 0.233 281.4);
--chart-1: oklch(0.62 0.21 281.4);
--chart-2: oklch(0.7 0.21 333.4);
--chart-3: oklch(0.62 0.21 25.4);
--chart-4: oklch(0.7 0.147 77.4);
--chart-5: oklch(0.62 0.166 129.4);
--sidebar: oklch(0.985 0.006 286);
--sidebar-foreground: oklch(0.145 0.008 286);
--sidebar-primary: oklch(0.586 0.233 281.4);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0.006 286);
--sidebar-accent-foreground: oklch(0.205 0.008 286);
--sidebar-border: oklch(0.922 0.006 286);
--sidebar-ring: oklch(0.586 0.233 281.4);
}
.dark {
--background: oklch(0.145 0.008 286);
--foreground: oklch(0.985 0.006 286);
--card: oklch(0.205 0.008 286);
--card-foreground: oklch(0.985 0.006 286);
--popover: oklch(0.205 0.008 286);
--popover-foreground: oklch(0.985 0.006 286);
--primary: oklch(0.686 0.17 281.4);
--primary-foreground: oklch(0.2 0.006 286);
--secondary: oklch(0.269 0.008 286);
--secondary-foreground: oklch(0.985 0.006 286);
--muted: oklch(0.269 0.008 286);
--muted-foreground: oklch(0.708 0.008 286);
--accent: oklch(0.269 0.008 286);
--accent-foreground: oklch(0.985 0.006 286);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.606 0.17 281.4);
--chart-1: oklch(0.66 0.186 281.4);
--chart-2: oklch(0.74 0.21 333.4);
--chart-3: oklch(0.66 0.21 25.4);
--chart-4: oklch(0.74 0.155 77.4);
--chart-5: oklch(0.66 0.176 129.4);
--sidebar: oklch(0.205 0.008 286);
--sidebar-foreground: oklch(0.985 0.006 286);
--sidebar-primary: oklch(0.686 0.17 281.4);
--sidebar-primary-foreground: oklch(0.2 0.006 286);
--sidebar-accent: oklch(0.269 0.008 286);
--sidebar-accent-foreground: oklch(0.985 0.006 286);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.686 0.17 281.4);
}
How to use it
- 1Choose your brand color. It becomes primary, ring, sidebar primary and the start of the chart palette.
- 2Pick a neutral family for backgrounds, borders and muted text.
- 3Set the radius. shadcn components derive their corner sizes from it.
- 4Copy the CSS and replace the :root and .dark blocks in your globals.css.
What the generated theme covers
The output uses the same variable names the shadcn/ui CLI writes: --background, --foreground, --card, --popover, --primary, --secondary, --muted, --accent, --destructive, --border, --input, --ring, five chart colors, the sidebar set and --radius. Every value is OKLCH, which is what Tailwind CSS v4 and current shadcn/ui use.
Neutrals are built from one hue at very low chroma, so grays feel related to each other instead of mixed from different palettes. The dark theme is not an inversion: surfaces step up in lightness with elevation, borders become translucent white, and the primary gets lighter so it keeps contrast on dark backgrounds.
Using it with MiniDev UI
MiniDev UI uses its own semantic token names (--surface, --ink, --accent) and maps the shadcn names onto them, so both sets of components can live in one project. Note that shadcn uses accent for a subtle hover fill while MiniDev uses it for the brand color. The shadcn registry guide explains how to reconcile the two.
Check your primary against white text with the contrast checker. Bright yellows and cyans usually need dark text instead.
Frequently asked questions
Does this work with Tailwind CSS v4?
Yes. Paste the output below @import "tailwindcss"; in your global CSS. It matches the v4 format that npx shadcn@latest init generates.
Why OKLCH instead of HSL?
OKLCH lightness is perceptual, so a light and dark theme built from it keep predictable contrast. shadcn/ui and Tailwind CSS v4 both moved to OKLCH.
Can I use more than one theme?
Yes. Scope a second set of variables to a class or data attribute, such as [data-theme="ocean"], and switch it on a wrapper.