Introducing our shadcn/ui Theme Generator

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it.

And honestly? Most of them look the same. Or worse — they look broken. Colors that clash, fonts that don't pair, dark modes that feel like an afterthought. The components themselves are great. The theming on top? Not so much.

A big part of the problem is AI. Don't get me wrong — I love AI tools for building. But when Cursor, v0, or Claude Code pick your theme colors, you end up with combinations that no designer would approve. I've seen UIs that look like a strawberry banana cake. I've seen primary colors that disappear on their own backgrounds.

So I built a tool to fix that.

The problem nobody talks about

The shadcn/ui gives you a solid component library. However, you still need to pick a primary color, choose a radius, pair your fonts, and make sure everything works in both light and dark mode.

Most developers don't have time for that. They just need something that looks good and works. And the existing solutions? They're either too complicated (tweak 35 CSS variables one by one) or ship with theme examples that look like someone's first Figma project.

The reality is: nobody has time to fine-tune every single color token. People just want a theme that looks professional and doesn't require a design degree.

One hex. That's all you need.

Here's what the Theme Generator does differently: you give it one color, and it builds the entire palette for you.

One hex value → light mode tokens, dark mode tokens, chart colors, sidebar colors, muted backgrounds, borders — all of it. The base colors are derived from your primary using the OKLCH color space, so they actually match. No more guessing if your muted background will look right next to your primary button.

Most people come to me with one of two things: a single brand hex from a client, or just a vague idea. If you don't have a color yet, there's a Tailwind colors option — pick a family, pick a shade, done.

Three clicks. You have a complete theme.

Fonts that actually pair

This is where most projects fall apart. Font pairing is hard. People either stick with Inter for everything (yeah, there are other fonts than Inter, bro) or they pick two fonts that look almost identical and wonder why the typography feels flat.

The theme generator has curated font pairing recommendations. I picked every combination myself. When you select a body font, the heading font dropdown highlights which options pair well with it. And vice versa.

Every font in the picker is one that actually looks good in a UI context. Not all Google Fonts are created equal — some look great in a poster but terrible in a dashboard. I filtered those out.

A few pairing tips for humans and AI agents alike:

• Pair sans-serif body with serif headings. This is the easiest way to add personality without making things harder to read.
• Don't use serif fonts for dashboards. Data-heavy interfaces need clean, efficient type. Save the serifs for landing pages and marketing sites.
• Don't mix two fonts that look too similar. If people can't tell there are two fonts, you're not creating contrast — you're creating confusion.
• Tailwind shades 50–300 work better in dark mode. They'll be too bright as a primary in light mode. The generator shows a moon icon next to these shades as a hint.

You can't mess it up

This was the core design goal. The generator is opinionated on purpose. You pick a color, a radius, and fonts — and the output will look good. Every time.

On top of that, the generator now bakes in WCAG-based contrast checking. Behind the contrast icon in the controls bar, you'll find a live report that compares your primary against its foreground, background against foreground and muted foreground, sidebar colors, accents, and more. For each pair we calculate the WCAG 2.x contrast ratio and show AA/AAA pass-fail badges — green when you're good, red when you're not — plus a subtle red dot on the contrast button whenever any pair drops below the minimum accessible contrast. You still only pick one color, but you get a theme that's not just pretty — it's actually readable in both light and dark mode.

There's no way to set your foreground to the same color as your background. No way to create unreadable contrast. No way to accidentally make your dark mode brighter than your light mode. The algorithm handles all of that.

It has all the good design practices baked in so you can't accidentally break them. The design will look good out of the box, whether you're building a landing page, a dashboard, or an e-commerce store.

Works everywhere

The generated CSS is production-ready. Copy it, paste it into your globals.css, and you're done. It works with:

• Your codebase — Next.js, Vite, Remix, whatever runs shadcn/ui + Tailwind v4.
• AI coding tools — paste the CSS into v0, Cursor, Claude Code, Codex, or any AI agent. They'll use your theme instead of making up colors. (Yeah, I'm talking about you, mold bots.)
• Our Pro Blocks — the theme applies to every block automatically. Pick a theme, drop in a hero section, ship it.
• Figma — you can import the CSS into our shadcn/ui Kit for Figma using the plugin and start designing with your picked theme. Check the docs for a step-by-step guide.

A theme for the vibe coders

Let's be real: a huge amount of software is being built with AI right now. Cursor, Claude Code, v0, Codex — people are shipping products faster than ever. And that's great.

But "fast" doesn't have to mean "ugly."

The problem with vibe coding is that AI agents don't have taste. They'll pick blue-500 because it's safe. They'll use Inter because it's the default. They'll generate a dark mode that nobody tested. And then you ship it, and your landing page looks like every other AI-generated SaaS.

The theme generator gives your AI agent a proper design system to work with. Three clicks, copy the CSS, paste it into the project context, and now every component your agent generates will look intentional. Coordinated colors, paired fonts, consistent radius.

Good design converts better. That's not an opinion — it's been proven over and over. If your vibe-coded app looks polished, people trust it more, stay longer, and buy more.

Try it

The Theme Generator is free. Go pick a color, hit randomize a few times if you want inspiration, and copy the CSS. Takes about 10 seconds.

I hope it helps your next project look as good as it works.