Shadcn Theme Generator
Pick a primary color and radius. See shadcn/ui components render live with your theme. Copy the CSS variables straight into your globals.css. Works with both Tailwind v3 and v4.
Live shadcn preview
Components reflect your theme variables in real time.
Card title
Cards inherit background, foreground, and border tokens.
Copy to globals.css
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 262.0 25.0% 8.0%;
--card: 0 0% 100%;
--card-foreground: 262.0 25.0% 8.0%;
--popover: 0 0% 100%;
--popover-foreground: 262.0 25.0% 8.0%;
--primary: 262.0 80.0% 50.0%;
--primary-foreground: 262.0 15.0% 98.0%;
--secondary: 262.0 18.0% 96.0%;
--secondary-foreground: 262.0 25.0% 12.0%;
--muted: 262.0 18.0% 96.0%;
--muted-foreground: 262.0 12.0% 45.0%;
--accent: 262.0 18.0% 96.0%;
--accent-foreground: 262.0 25.0% 12.0%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 262.0 22.0% 91.0%;
--input: 262.0 22.0% 91.0%;
--ring: 262.0 80.0% 50.0%;
--radius: 0.5rem;
}
}Paste this into your globals.css under @layer base. Generate the theme twice (light + dark) and concatenate the blocks for full theme support.
Want a production-ready shadcn project to drop this theme into?
The thefrontkit SaaS Starter Kit is a Next.js + Tailwind + shadcn/ui boilerplate with auth, dashboard, settings, data tables, and form primitives already wired to consume these CSS variables. Paste your theme, every screen rebrands instantly.
See the SaaS Starter KitFrequently Asked Questions
Common questions about generating, exporting, and applying shadcn themes.
A shadcn theme generator is a tool that produces the CSS custom properties shadcn/ui expects in your globals.css file (background, foreground, primary, secondary, accent, muted, border, ring, etc.) from a small set of inputs like a primary brand color and a border radius. Instead of editing 19+ HSL triplets by hand, you pick a color, see a live preview of shadcn components rendered with the theme, and copy the resulting CSS block straight into your project.
Both tools generate shadcn-compatible themes. This one is leaner: a primary color, radius, and mode produce the full CSS variable block in seconds, with a focused live preview. tweakcn offers more granular control over individual variables and a larger preset library. If you want a quick starting theme, use this. If you want pixel-level tuning of every variable, tweakcn is the deeper tool.
Copy the @layer base block and paste it into your app's globals.css (or wherever you keep your Tailwind base layer). The variables override the defaults shadcn ships with, and every component that reads from var(--primary), var(--background), etc. updates instantly. To support dark mode, generate the theme twice (once in light, once in dark mode) and paste both blocks. Make sure your dark-mode wrapper class matches whatever your app uses (typically .dark).
Yes. The generated CSS variables are framework-agnostic HSL triplets, so they work with both Tailwind v3 (the format shadcn uses by default) and Tailwind v4. For v4 specifically, you can wrap the variables in a @theme block instead of @layer base if you prefer the v4 native approach. The variable names are identical.
No. Everything runs in your browser: the color conversion, token generation, preview, and copy-to-clipboard. Nothing is uploaded, logged, or stored. Close the tab and your inputs are gone.
Yes, we ship one. The thefrontkit SaaS Starter Kit is a production-ready Next.js + Tailwind + shadcn/ui boilerplate with auth, dashboard, settings, data tables, and form primitives. The design tokens are already set up to consume the variables this tool generates, so you can paste your theme and the entire app rebrands instantly. See /apps/saas-starter-kit for details.