Nodlumeshadcn/ui theme generator
Create a custom shadcn theme right here — a complete design-system customizer, no account needed. Pick or shuffle a palette, pair fonts, tune the type scale, radius, shadows and spacing, and watch a live landing-page mockup restyle itself in light and dark mode. Your theme is saved in this browser as you edit, and exports as a Tailwind v4 globals.css you can drop into any shadcn/ui project. Under the hood it is a plain CSS theme generator — the export is just custom properties — so the tokens travel beyond shadcn too.
Real shadcn/ui tokens
Eight semantic color roles plus the derived extended set — foregrounds, destructive, a five-step chart ramp and the sidebar tokens — exactly the CSS variables a Tailwind v4 shadcn/ui project reads.
Curated palettes and font pairings
40 curated color palettes, 64 heading/body/mono font pairings and a modular type scale — or shuffle any combination of palette, typography, shape and shadows until something clicks.
Light and dark, live
The preview renders a full landing page and token specimens from the same resolved tokens the export emits, with a one-click dark mode derived from your palette.
Theming shadcn/ui, answered
- How do I theme shadcn/ui?
- shadcn/ui components read their colors, radius, and shadows from CSS variables — semantic tokens like --primary, --background, and --border defined in your globals.css. Theming shadcn means changing those variables, not editing component code. This generator produces the full Tailwind v4 globals.css: pick a palette, fonts, and shape, and paste the export into your project.
- Can I create a custom shadcn theme without design experience?
- Yes — that is what the curated starting points are for. Pick one of 40 palettes and one of 64 font pairings, or shuffle until something clicks; the derived tokens (foregrounds, muted tones, chart ramp, sidebar set) are computed for legibility, and the live preview shows a whole landing page in your theme before you commit to it.
- Does the exported theme support dark mode?
- Yes. Dark mode variants are derived from your palette and exported alongside the light tokens in the same globals.css, under the .dark selector shadcn/ui projects already use. The preview toggles between the two so you can check both before exporting.
- What are shadcn base colors, and can I go beyond them?
- The shadcn base colors are the five neutral scales the CLI offers when you init a project — slate, gray, zinc, neutral, and stone — set once as baseColor in components.json. That configuration only decides your grays, and changing it later means regenerating CSS, which is why most shadcn ui themes floating around are recolors of the same five. This generator goes past that: the neutrals are derived from your seed hue at tuned lightness steps, so the grays belong to your palette instead of coming off a shelf.
- Is this shadcn theme generator free?
- Yes. The theme maker runs in your browser with no account, and your theme is saved locally as you edit. The same editor themes generated Next.js projects inside the Nodlume workspace.
Ship it as a real project
In the Nodlume workspace this same editor themes your whole app: the design system is emitted as a Tailwind v4 app/globals.css inside a generated Next.js project — pages, components, API routes and data model designed on a visual canvas. Learn how the pieces fit together in the guides to semantic UI palettes and spacing, shadows, and borders.