shadcn/ui · Free Tool

Shadcn Theme Generator

Pick a primary color and radius. See shadcn/ui components render live with your theme. Copy the CSS variables straight into your globals.css. Works with both Tailwind v3 and v4.

Primary color

Border radius: 0.5rem

Sharp (0)Round (1.5)

Mode

Live shadcn preview

Components reflect your theme variables in real time.

Card title

Cards inherit background, foreground, and border tokens.

PrimarySecondaryOutline

Heads up. Alert components use the muted token for the surface and border for the edge.

Copy to globals.css

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 262.0 25.0% 8.0%;
    --card: 0 0% 100%;
    --card-foreground: 262.0 25.0% 8.0%;
    --popover: 0 0% 100%;
    --popover-foreground: 262.0 25.0% 8.0%;
    --primary: 262.0 80.0% 50.0%;
    --primary-foreground: 262.0 15.0% 98.0%;
    --secondary: 262.0 18.0% 96.0%;
    --secondary-foreground: 262.0 25.0% 12.0%;
    --muted: 262.0 18.0% 96.0%;
    --muted-foreground: 262.0 12.0% 45.0%;
    --accent: 262.0 18.0% 96.0%;
    --accent-foreground: 262.0 25.0% 12.0%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 262.0 22.0% 91.0%;
    --input: 262.0 22.0% 91.0%;
    --ring: 262.0 80.0% 50.0%;
    --radius: 0.5rem;
  }
}

Paste this into your globals.css under @layer base. Generate the theme twice (light + dark) and concatenate the blocks for full theme support.

Want a production-ready shadcn project to drop this theme into?

The thefrontkit SaaS Starter Kit is a Next.js + Tailwind + shadcn/ui boilerplate with auth, dashboard, settings, data tables, and form primitives already wired to consume these CSS variables. Paste your theme, every screen rebrands instantly.

See the SaaS Starter Kit

Frequently Asked Questions

Common questions about generating, exporting, and applying shadcn themes.