Compare two shadcn/ui themes side by side

Preview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ.

Loading themes…

How it works

1
Choose any two themes from the catalog.
2
Both render on the same set of real shadcn/ui components, so differences in color, radius, fonts and shadows are easy to spot.
3
The token table lists every value that differs, for the current mode.

FAQ

Can I compare my own theme?

This tool compares catalog themes. To compare against your own, open it in the editor and switch between the Presets list and your draft; undo and redo let you flip back and forth.

More tools

Theme switcher builder

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.

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.

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.