Skip to content

Your shadcn theme, built as a preset.

Pick a style, colors, fonts, radius, icons and menus, or start from one of 59 presets. See it on real components, then take one code to your project.

Get ProBuild a preset

Build your preset

Pick each part of your preset, or shuffle. Every pick shows at once on real components, in light or dark, and only combinations shadcn's CLI builds are on offer.

Component library

Not in the code: shadcn's CLI installs on it (--base).

Reduced padding and margins.

Base colorTaupe
AccentAmber
Chart colorAmber
RadiusSmall
IconsLucide
Menu
Menu accent

Use your preset

One code holds every pick. Start a project with it, restyle one you have, or copy its CSS. shadcn's CLI reads it as it is.

Preset code

b8OmNERHTE

Nova · Taupe base · Amber accent · Amber charts · DM Sans and Instrument Serif · Lucide

This site

Use it on shadcn.io: its style, base color, accent and radius, saved in this browser. Fonts, icons, charts and menus stay the site's.

A new project, on Base UI

bunx --bun shadcn@latest init --preset b8OmNERHTE --base base

The CLI asks for a template (Next.js, Vite, React Router, Astro and more), then writes components.json, the variables, the fonts and the icon package. Every component you add after comes in this preset.

Everything: components, colors, fonts and icons

bunx --bun shadcn@latest apply b8OmNERHTE

Only the colors and radius

bunx --bun shadcn@latest apply b8OmNERHTE --only theme

app/globals.css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.3);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.3);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.3);
  --primary: oklch(0.555 0.163 48.998);
  --primary-foreground: oklch(0.987 0.022 95.277);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.96 0.002 17.2);
  --muted-foreground: oklch(0.547 0.021 43.1);
  --accent: oklch(0.96 0.002 17.2);
  --accent-foreground: oklch(0.214 0.009 43.1);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0.005 34.3);
  --input: oklch(0.922 0.005 34.3);
  --ring: oklch(0.714 0.014 41.2);
  --chart-1: oklch(0.879 0.169 91.605);
  --chart-2: oklch(0.769 0.188 70.08);
  --chart-3: oklch(0.666 0.179 58.318);
  --chart-4: oklch(0.555 0.163 48.998);
  --chart-5: oklch(0.473 0.137 46.201);
  --radius: 0.45rem;
  --sidebar: oklch(0.986 0.002 67.8);
  --sidebar-foreground: oklch(0.147 0.004 49.3);
  --sidebar-primary: oklch(0.666 0.179 58.318);
  --sidebar-primary-foreground: oklch(0.987 0.022 95.277);
  --sidebar-accent: oklch(0.96 0.002 17.2);
  --sidebar-accent-foreground: oklch(0.214 0.009 43.1);
  --sidebar-border: oklch(0.922 0.005 34.3);
  --sidebar-ring: oklch(0.714 0.014 41.2);
}

.dark {
  --background: oklch(0.147 0.004 49.3);
  --foreground: oklch(0.986 0.002 67.8);
  --card: oklch(0.214 0.009 43.1);
  --card-foreground: oklch(0.986 0.002 67.8);
  --popover: oklch(0.214 0.009 43.1);
  --popover-foreground: oklch(0.986 0.002 67.8);
  --primary: oklch(0.473 0.137 46.201);
  --primary-foreground: oklch(0.987 0.022 95.277);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.268 0.011 36.5);
  --muted-foreground: oklch(0.714 0.014 41.2);
  --accent: oklch(0.268 0.011 36.5);
  --accent-foreground: oklch(0.986 0.002 67.8);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.547 0.021 43.1);
  --chart-1: oklch(0.879 0.169 91.605);
  --chart-2: oklch(0.769 0.188 70.08);
  --chart-3: oklch(0.666 0.179 58.318);
  --chart-4: oklch(0.555 0.163 48.998);
  --chart-5: oklch(0.473 0.137 46.201);
  --sidebar: oklch(0.214 0.009 43.1);
  --sidebar-foreground: oklch(0.986 0.002 67.8);
  --sidebar-primary: oklch(0.769 0.188 70.08);
  --sidebar-primary-foreground: oklch(0.279 0.077 45.635);
  --sidebar-accent: oklch(0.268 0.011 36.5);
  --sidebar-accent-foreground: oklch(0.986 0.002 67.8);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.547 0.021 43.1);
}

@theme inline {
  --font-sans: 'DM Sans Variable', sans-serif;
  --font-heading: 'Instrument Serif', serif;
}

The variables shadcn's CLI writes, light on :root and dark on .dark. Install the fonts yourself; the style and icons come with the CLI.

The Vue, Svelte and Solid CLIs don't read a preset yet: their setup installs shadcn.io's own theme. Run it, then paste this preset's CSS over the theme's variables. The colors, charts and radius carry over; the style, fonts and icon library are for shadcn's React CLI.

  1. Set up the components: Vue, Svelte, Solid.
  2. Copy the CSS tab and paste it into your stylesheet.

Start from a preset

shadcn.io's 59 themes, as presets. Open one in the generator and make it yours: every field stays yours to change.

Build it with Pro

The generator is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds with your theme.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 7 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

Frequently asked questions

Presets, the rules shadcn's CLI keeps, and how to take your theme to a project.

What is the shadcn theme generator?

A free tool that builds a shadcn/ui preset: you pick the style, base color, accent, chart color, body and heading fonts, radius, icon library and menu, watch them on real components, and take one short code to your project. shadcn turned themes into presets (its /themes page now opens /create), so a preset is how a shadcn theme travels.

What is a shadcn preset?

A short code, like b0, that packs ten choices: the style, base color, accent, chart color, body font, heading font, radius, icon library, menu color and menu accent. shadcn's CLI reads it (`shadcn init --preset <code>`, `shadcn apply <code>`) and ui.shadcn.com/create opens it, so the same code works everywhere.

How is a preset different from a theme?

A theme is colors and a radius, written as CSS variables. A preset carries those and more: the style the components are drawn in (spacing, shapes, borders), the fonts and the icon library, so the CLI installs components that already look like your design, not the default with new colors.

Is the theme generator free?

Yes. There's no account and nothing to install: every pick, the preview and the output run in your browser. The codes are shadcn's own, so they work with the shadcn CLI whether or not you use anything else from shadcn.io.

Does the preview use real components?

Yes. The preview is the registry's own components (on Base UI) in a frame of their own, with the preset's style sheet, its colors exactly as shadcn's CLI writes them, its fonts loaded from Google Fonts and its icon library's drawings. The site's own theme and mode never reach it, so what you see is the preset.

4.9 out of 5 from 150+ developers

Your theme on every block

Every block and template is built on the same tokens, so it takes your colors and radius. The generator stays free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped