Theming shadcn/ui with Tailwind v4: five free tools

Summary

shadcn/ui theming with Tailwind v4 depends on CSS custom properties and Tailwind design tokens, not on isolated color picks — and these five browser-based tools all feed the same app/globals.css workflow. This article covers themes, dark mode, font pairings, type scales, and palettes, and how the five compose into one design system.

Tokens are the theme

A shadcn/ui project on Tailwind v4 is themed by CSS custom properties: eight semantic color roles, the derived extended set (foregrounds, destructive, the chart-* ramp, sidebar tokens), font stacks, a radius scale, a type scale, shadows. Change the tokens and every component follows — naming a shadow md restyles every shadow-md already in the tree.

Which means a theming tool is only useful if it emits those tokens, spelled the way your project reads them. We took the theme system that powers the Nodlume workspace and put it online as free, no-login tools. Everything below runs in your browser; nothing needs an account.

The theme generator

The shadcn/ui theme generator puts the whole design system in one editor: the eight roles with a palette builder, extended shadcn tokens, 64 font pairings, a modular type scale, radius, elevation and spacing scales — previewed live on a full landing-page mockup rendered from the same resolved tokens the export emits. What you see is literally what ships.

Two exports: a Tailwind v4 app/globals.css (the @theme block, the .dark block, utility classes) and a W3C-style design-tokens.json for token pipelines. Your theme persists in your browser between visits.

The dark mode converter

Already have a light theme? Paste your :root variables and get the derived .dark block. The derivation is the same one the theme generator uses: each role's lightness is remapped while its hue survives, so dark mode stays your palette rather than a gray template. Roles that aren't hex literals derive nothing — deliberately, since a var() reference has no lightness to remap.

Font pairings and the type scale

Typography is two decisions: which faces, and what rhythm. The pairing explorer has 64 curated heading/body/mono combinations, browsable by category and previewed in the real faces; copy the three CSS stacks when one clicks. The type scale calculator takes a base size and a ratio — minor third, perfect fourth, golden, or your own — and emits the --text-* tokens at every step, computed by the same code the workspace uses, so the calculator can never disagree with the export.

The palette generator

Start from a seed color and a harmony and grow the full eight-role palette — neutrals derived as lightness steps tinted with the seed hue, capped so a loud brand color doesn't bleed into body text. Or start from 40 curated palettes with named swatches and use cases.

They compose

These aren't five separate theme formats. A palette you like drops into the theme generator; the pairing you pick fills its typography section; the scale you tuned is its type scale. And if you also sketch a project in the structure painter, the theme you built rides along in the downloaded skeleton as its app/globals.css — the tools share one browser, so they share your work.

Inside Nodlume the same editor themes real generated projects — pages, components, API routes and data model designed on a visual canvas, exported as code you own.

Q&A

Question: Why does this say "tokens are the theme" instead of focusing only on colors?

Short answer: Because shadcn/ui theming with Tailwind v4 depends on CSS custom properties that define the whole design system, not just a palette. The tokens include semantic color roles, foregrounds, destructive states, chart and sidebar tokens, font stacks, radius, type scale, shadows, elevation, and spacing. When those tokens change, components update across the project.

Question: What does the theme generator export?

Short answer: The Tailwind v4 theme generator exports an app/globals.css file with the @theme block, the .dark block, and utility classes, plus a W3C-style design-tokens.json file. The preview renders from the same resolved tokens as the export, so the mockup matches what ships.

Question: How does the dark mode converter preserve the original palette?

Short answer: It remaps each role's lightness while keeping the hue, so the .dark block stays tied to the light theme instead of becoming a generic gray dark mode. If a role is not a hex literal — a var() reference, say — the converter deliberately derives nothing, because there is no lightness value to remap.

Question: How do the five tools work together?

Short answer: They share one token format and one browser-based workflow. A palette drops into the theme generator, a font pairing fills its typography section, and a tuned type scale becomes the generator's type scale. The same theme also rides along with a downloaded project skeleton as app/globals.css.

Question: Do these tools require an account or server-side setup?

Short answer: No. All five are free, browser-based, and need no login. The theme persists in your browser between visits, and the outputs are ready to copy or export into the project's token workflow.