What does the shadcn/ui theme generator create?

It generates CSS custom property declarations for shadcn/ui colors, radius, shadows, spacing, and related design tokens. The output includes light and dark mode selectors ready to paste into globals.css.

Can I generate both light and dark themes?

Yes. The output includes a :root block for light mode and a .dark block for dark mode, with separate values for the shadcn/ui color tokens.

Do I need to change the shadcn/ui components themselves?

Usually not. Because shadcn/ui components consume CSS variables, adding the generated variables to your global stylesheet changes the theme without modifying component internals.

Is my theme uploaded?

No. Theme editing, previewing, and CSS generation happen entirely in your browser.

shadcn/ui Theme Generator

Generate custom shadcn/ui themes with CSS variables for light and dark mode. Copy-paste into your globals.css.

Theme Presets

Colors

Primary#3b82f6

Secondary#6b7280

Accent#8b5cf6

Muted#f1f5f9

Destructive#ef4444

Border Radius

0.5rem

Preview

Light Mode

Muted background with muted foreground text

Dark Mode

globals.css

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 210 40% 10%;
    --card: 0 0% 100%;
    --card-foreground: 210 40% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 40% 10%;
    --primary: 217 91% 60%;
    --primary-foreground: 217 91% 5%;
    --secondary: 220 9% 46%;
    --secondary-foreground: 0 0% 98%;
    --muted: 210 40% 95%;
    --muted-foreground: 210 40% 45%;
    --accent: 258 90% 66%;
    --accent-foreground: 258 90% 5%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 40% 90%;
    --input: 210 40% 90%;
    --ring: 217 91% 60%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 210 40% 8%;
    --foreground: 210 40% 95%;
    --card: 210 40% 10%;
    --card-foreground: 210 40% 95%;
    --popover: 210 40% 10%;
    --popover-foreground: 210 40% 95%;
    --primary: 217 91% 55%;
    --primary-foreground: 0 0% 98%;
    --secondary: 220 9% 36%;
    --secondary-foreground: 0 0% 98%;
    --muted: 210 40% 18%;
    --muted-foreground: 210 40% 60%;
    --accent: 258 90% 56%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 40% 20%;
    --input: 210 40% 20%;
    --ring: 217 91% 55%;
    --radius: 0.5rem;
  }
}

Examples

Convert the Blue preset primary

Input

#3b82f6

Output

217 91% 60%

The rounded HSL channels become the light-mode --primary value; the dark primary uses the same hue and saturation at 55% lightness.

Convert a Green primary

Input

#22c55e

Output

142 71% 45%

Because the lightness is below 50%, the light theme pairs this primary with a near-white foreground.

Convert the Slate preset primary

Input

#64748b

Output

215 16% 47%

The generator rounds the converted channels to integers before placing them in CSS custom properties.

About this tool

The shadcn/ui Theme Generator converts five chosen hex colors into HSL-channel CSS custom properties for light and dark interfaces. It emits the classic background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring and radius tokens inside an @layer base block.

Choose one of six presets or adjust Primary, Secondary, Accent, Muted and Destructive with native color pickers. The converter rounds hue, saturation and lightness to whole numbers, derives foreground colors with a lightness heuristic, and creates darker variants by clamping or offsetting the selected lightness values.

The side-by-side preview helps compare the generated light and dark palettes before copying the CSS into globals.css. Because foreground selection is not a contrast audit, verify important text and controls against your accessibility targets after generation.

How to use

Start from a preset
Choose Default, Blue, Green, Orange, Rose or Slate to load a coordinated starting palette and radius.
Tune the semantic colors
Use the five color pickers to adjust primary actions, secondary surfaces, accents, muted surfaces and destructive states.
Adjust the radius
Move the radius slider from 0 to 2rem in 0.125rem steps and inspect the simulated controls in both previews.
Copy the CSS
Review the generated :root and .dark token blocks, copy them, and integrate them into the base layer of globals.css.

Use cases

Bootstrapping a new shadcn/ui application

Generate a coherent initial token set before building components and page layouts.

Creating branded light and dark modes

Translate brand colors into both theme blocks while keeping the same semantic token names.

Prototyping palette alternatives

Switch presets and color inputs quickly to compare visual directions without hand-editing dozens of CSS variables.

Standardizing border radius

Set one shared radius token and preview how it affects buttons, panels and other rounded surfaces.

Common mistakes

Mistake:Treating generated foreground colors as guaranteed accessible.

Fix:Measure contrast for text, icons and controls; the generator uses only a simple lightness threshold.

Mistake:Pasting the channel values into CSS as standalone colors.

Fix:Consume tokens in the convention expected by the app, commonly hsl(var(--primary)), because values such as 217 91% 60% are HSL channels.

Mistake:Expecting every modern shadcn token to be generated.

Fix:Add any project-specific chart, sidebar or status tokens manually after copying the fixed token set.

Mistake:Assuming hex-to-HSL conversion is lossless.

Fix:Expect small differences because hue, saturation and lightness are rounded to whole numbers.

Frequently asked questions

Building Custom Themes for Tailwind CSS and shadcn/ui

How to configure custom CSS color tokens, HSL variables, dark mode overrides, and border-radius tokens for shadcn/ui and Tailwind.

shadcn/ui Theme Generator

Theme Presets

Colors

Border Radius

Preview

globals.css

Examples

Convert the Blue preset primary

Convert a Green primary

Convert the Slate preset primary

About this tool

How to use

Start from a preset

Tune the semantic colors

Adjust the radius

Copy the CSS

Use cases

Bootstrapping a new shadcn/ui application

Creating branded light and dark modes

Prototyping palette alternatives

Standardizing border radius

Common mistakes

Frequently asked questions

Building Custom Themes for Tailwind CSS and shadcn/ui

References & standards

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

Cubic Bezier / Easing Generator

Dummy Avatar Generator

Theme Presets

Colors

Border Radius

Preview

globals.css

Examples

Convert the Blue preset primary

Convert a Green primary

Convert the Slate preset primary

About this tool

How to use

Start from a preset

Tune the semantic colors

Adjust the radius

Copy the CSS

Use cases

Bootstrapping a new shadcn/ui application

Creating branded light and dark modes

Prototyping palette alternatives

Standardizing border radius

Common mistakes

Frequently asked questions

What does the shadcn/ui theme generator create?

Can I generate both light and dark themes?

Do I need to change the shadcn/ui components themselves?

Is my theme uploaded?

Related guides

Building Custom Themes for Tailwind CSS and shadcn/ui

References & standards

Related tools

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

Cubic Bezier / Easing Generator

Dummy Avatar Generator