shadcnthemes
Create theme
All tools

Build a multi-theme switcher for shadcn/ui

Pick several shadcn/ui themes and install them all at once, with a ready-made theme picker, a hook and a no-flash script, using a single shadcn CLI command.

Loading themes…

How it works

  1. 1

    Choose the themes your users can pick from. The first one becomes the default.

  2. 2

    Preview switching between them live, in light and dark mode.

  3. 3

    Download one registry file and run npx shadcn add on it: every theme is scoped to a data-theme attribute in globals.css, and a picker, hook and no-flash script are added to your project.

FAQ

Does it work with dark mode?

Yes. Each theme ships light and dark values, and the dark class from next-themes combines with the data-theme attribute.

Can I theme just part of a page?

Yes. Put data-theme on any element and everything inside it uses that theme. That's handy for previews or multi-tenant branding.

How do I add more themes later?

Rebuild the file with the extra themes and run the command again, or copy another theme's variables into a new [data-theme] block.

More tools

Tailwind v3 → v4 theme converter
Paste a Tailwind v3 shadcn/ui globals.css with HSL variables and get Tailwind v4 CSS with OKLCH colors, @theme inline mappings and chart and sidebar tokens.
OKLCH color converter
Convert hex, HSL and RGB colors to OKLCH, and back, for Tailwind v4 and shadcn/ui. Convert one color or a whole list of CSS variables at once.
Theme contrast checker
Check every text color in a shadcn/ui theme against WCAG 2 contrast in light and dark mode, then fix failing pairs automatically while keeping your theme's colors.
Image to theme
Upload a logo, screenshot or photo and get a complete shadcn/ui theme built from its colors, with accessible light and dark palettes, ready to export.
Compare themes
Preview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ.
Color scale generator
Generate a Tailwind-style 50–950 color scale in OKLCH from any brand color, and copy it as Tailwind v4 @theme variables for use alongside your shadcn/ui theme.