Shadcn Theme Generator

Create & Share Beautiful Shadcn UI Themes

Customize every design token (colors, typography, spacing, and radius) in a live preview. Save themes with a unique URL, share with teammates, and copy the CSS code straight into your project.

Open Theme GeneratorGet All Access
Infinite Canvas

Design on an Infinite Canvas

Preview your theme across multiple UI components on a zoomable, pannable infinite canvas. See how your color choices and typography affect real components like cards, buttons, forms, charts, and more, all at once.

No more guessing. See the full picture.

Deep Customization

Dozens of Customization Options

Go far beyond just a primary color. Tweak every design token: background, foreground, card, popover, muted, accent, destructive, border, ring, sidebar, and 5 chart colors. Plus fine-grained control over typography (font family, size, weight, line height), spacing units, border radius, and shadow.

Full token-level control over your design system.

Save & Share

Save, Update, and Share Themes

Hit Save and your theme gets a unique URL like ?theme=abc123. Come back later and update it or create a new version. Share the link with your teammates, clients, or the community. Anyone with the link can load your theme instantly.

Permanent shareable links for every saved theme.

Light & Dark

Independent Light and Dark Mode Editing

Edit your light and dark color schemes separately. Switch between modes in the panel and tweak each token independently. The live preview updates in real time so you can see both modes side by side and get the perfect contrast for every context.

Pixel-perfect themes for both modes.

Live Preview

Preview Your Theme Across Templates, Components & Blocks

See your theme applied to real-world templates, UI components, and pre-built blocks, all rendered live inside the canvas. Whether it's a dashboard, a marketing page, or an e-commerce layout, you get an accurate preview before committing a single line of code.

What you see is exactly what you'll ship.

How it works

From zero to custom theme in three steps

Start from a preset, make it yours and drop the CSS into your project.

  1. Pick a preset

    Start from one of the curated presets or begin from the default shadcn theme.

  2. Customize tokens

    Adjust colors, fonts, radius, and spacing until the live preview looks exactly right.

  3. Save & export

    Save to get a shareable URL, then copy the CSS block into your globals.css.

Try it now, it's free
FAQ

Frequently asked questions

Yes. You can create, preview and export shadcn/ui themes in your browser for free.

It exports CSS variables: a :root block for light mode and a .dark block for dark mode, with colors in oklch(), plus the radius, spacing, font family, font size, line height and font weight values.

Copy the CSS from the code view and paste both blocks into your global CSS file, replacing the existing theme variables. Every shadcn/ui component and every Shadcn UI Kit block picks up the new theme automatically.

Every color token, including background, foreground, card, popover, muted, accent, destructive, border, ring, sidebar and the five chart colors, together with typography, spacing, radius and shadows.

Yes. Light and dark mode are edited separately, so you can tune the contrast of each one before you export.

You can start from Zinc, Blue, Green, Rose, Violet, Orange or Amber and adjust every value from there.

Yes. The exported variables use oklch() colors and the variable names that shadcn/ui uses with Tailwind CSS v4.

You can save themes in your browser, and when you are signed in you can share a theme with a link.

Get Lifetime Access Now

Unlock lifetime access today and become part of the growing shadcn ecosystem, empowering you to build your projects faster and more efficiently. Keep this continuously updated and ever-expanding collection at your fingertips, and stay ahead with the latest components, templates, and improvements.

Get All Access