Nodlumeshadcn/ui theme generator for Tailwind v4
A free shadcn theme generator and Tailwind theme generator in one editor — 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. Not sure where to start? Open one of the twelve preset themes below.
Preset shadcn/ui themes
Twelve complete themes — palette, font pairing, radius, elevation and type scale chosen to fit one kind of product. Each page shows the theme in light and dark mode with the exact globals.css it exports, and opens in the generator with every control live.
- Ocean DepthsDeep navy and teal over cool neutrals — the SaaS default done properly.Inter · Inter · 0.5rem radius
- Moody BluesA dark-first developer-tool theme with an electric blue accent.Space Grotesk · Inter · 0.375rem radius
- Ink & PaperNewsprint and carbon — an editorial theme for reading, not clicking.Playfair Display · Source Serif 4 · 0.25rem radius
- Matcha LatteSoft greens and cream for organic, food, and wellness products.Nunito · Work Sans · 0.75rem radius
- Neon NightsElectric accents on near-black for nightlife, gaming, and launch pages.Plus Jakarta Sans · IBM Plex Mono · 0.375rem radius
- Royal CourtDeep purple and gold — a luxury theme for premium services.DM Serif Display · DM Sans · 0.25rem radius
- Arctic IceClinical blues and white for medical, enterprise, and compliance UIs.IBM Plex Sans · IBM Plex Serif · 0.375rem radius
- Sunset GlowWarm coral and amber — a dashboard palette with a readable chart ramp.Poppins · Open Sans · 0.75rem radius
- Forest WalkMossy greens and bark for health, outdoors, and sustainability brands.Gill Sans · Nunito · 0.5rem radius
- Emerald CityRich emerald and slate — a finance theme that signals growth.Optima · Inter · 0.375rem radius
- Aurora ForecastCool violet and mint — a modern developer documentation theme.Space Grotesk · JetBrains Mono · 0.375rem radius
- Blush & SlateDusty pink against charcoal — a modern agency and portfolio theme.Montserrat · Open Sans · 0.75rem radius
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, 67 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.
- Is this a Tailwind theme generator too, or only for shadcn/ui?
- Both, because in Tailwind v4 they are the same file. The export is a @theme block of custom properties — --color-*, --font-*, --radius-*, --text-*, --shadow-* — which Tailwind turns into utilities like bg-primary, font-heading, rounded-lg and text-xl. shadcn/ui reads the same variables. So a project with no shadcn components at all gets a complete Tailwind v4 theme from the same download, and one that uses shadcn gets its components restyled for free.
- Can I create a custom shadcn theme without design experience?
- Yes — that is what the presets and curated starting points are for. Open one of the 12 preset shadcn themes below, or pick from 40 palettes and 67 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 generating custom themes, semantic UI palettes and spacing, shadows, and borders— or compare this editor with the other free shadcn theming tools.