This tool lets you visually customize every CSS variable used by shadcn/ui and Tailwind CSS v4. All variables follow the OKLCH color space, which provides perceptually uniform colors across lightness, chroma, and hue axes. Changes apply instantly to the live preview on the right, so you can see exactly how buttons, cards, forms, and charts will look before you export.

Unlike hand-editing your globals.css, the generator lets you explore the full color space interactively. You can start from a built-in preset (Default, Zinc, Ocean, and others), tweak individual variables, and export a production-ready CSS block in seconds.

OKLCH is a perceptual color model with three axes: Lightness (L, 0 to 1), Chroma (C, 0 to ~0.4), and Hue (H, 0 to 360 degrees). Unlike HSL, two OKLCH colors at the same L value actually appear equally bright to the human eye, because the model is calibrated to human vision.

shadcn/ui switched to OKLCH in Tailwind v4 for two main reasons: color scales are more consistent and predictable, and dark-mode counterparts are easier to compute (just lower the L value). This also improves accessibility since contrast ratios are more reliable when colors are perceptually uniform.

Click the Code tab, then copy the generated CSS block or download the file. Open your project's globals.css and replace the existing :root and .dark blocks with the exported content. Everything else in the file (the @theme inline block, Tailwind imports, custom utilities) stays untouched.

The changes take effect on the next hot reload in development, or on the next build for production. No JavaScript changes are needed since shadcn/ui components read these CSS variables at runtime.

Yes. Open the Code tab and paste your existing globals.css (or just the :root and .dark blocks) into the Import section. The tool parses every OKLCH variable it recognizes and loads the values into the editor.

Variables using other color formats (hex, hsl, rgb) are skipped without errors, so you can safely paste an entire file and the tool will extract only what it understands. This also works with themes exported from other shadcn theme editors or any Tailwind CSS v4 project that uses OKLCH variables.

The Contrast tab scores the nine most important foreground / background pairings in a shadcn theme (body text on background, primary button text on primary, sidebar text on sidebar, and so on) against the WCAG 2.1 contrast formula. Each pair gets its ratio, an AA badge (4.5:1 for body text, 3:1 for large text), and an AAA badge (7:1 / 4.5:1). Failing pairs are highlighted so you can raise the lightness delta before you ship.

The muted caption pair is scored against the Large Text threshold by default, because --muted-foreground is typically used for descriptions and table labels where the AA Large bar of 3:1 is the realistic minimum. Ratios update live as you edit variables, and the panel toggles between light and dark mode values based on the editing mode selector.

Yes. Every change is written to localStorage under the key codevup:shadcn-theme, so refreshing the tab restores your theme exactly where you left it. Click Reset to Default to clear local storage and return to the Blue preset. If you open the tool with a ?theme= share link in the URL, the link takes priority and overrides the stored value for that session.

You can also undo mistakes with ⌘Z (or Ctrl+Z on Windows) and redo with ⌘⇧Z or Ctrl+Y. Rapid slider drags are coalesced so a single undo steps back an entire drag rather than one pixel at a time.

The preview panel shows four scenes: Components (isolated gallery of every shadcn primitive), Dashboard (sidebar, KPI cards, area chart, transactions table — the most common shadcn use case), Auth (sign-in card on a muted background, exercising card-on-muted contrast), and Pricing (three-tier card grid with a primary-highlighted tier). Switch between them to see how a theme feels in realistic layouts, not just next to parts in a showroom.

Several other tools cover similar ground, each with a different focus:

• tweakcn.com is one of the most popular alternatives. It offers a visual editor for shadcn/ui component styles with a focus on fine-grained per-component customization, going beyond global CSS variables.
• ui.shadcn.com/themes is the official shadcn/ui themes page. It provides a small set of curated presets (Zinc, Slate, Stone, Gray, Neutral, Red, Rose, Orange, Green, Blue, Yellow, Violet) that you can copy directly.
• ui.jln.dev hosts a large gallery of community-submitted shadcn/ui themes. It is useful for browsing inspiration and copying a complete theme without building one from scratch.

Compared to these tools, this generator focuses on full OKLCH variable control with a live component preview and direct globals.css import and export, keeping everything in the browser with no account required.