Loading…
Tool
Quick answer
Design a complete shadcn/ui theme live — light & dark colors, radius, shadows and Google Fonts — on a realistic component preview. Check WCAG contrast, then export to globals.css, Tailwind, CSS variables or JSON. Free, no sign-up.
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 229 84% 5%;
--card: 0 0% 100%;
--card-foreground: 229 84% 5%;
--primary: 210 75% 37%;
--primary-foreground: 0 0% 100%;
--secondary: 210 40% 96%;
--secondary-foreground: 222 47% 11%;
--muted: 210 40% 96%;
--muted-foreground: 215 16% 47%;
--accent: 210 40% 96%;
--accent-foreground: 222 47% 11%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 210 75% 37%;
--radius: 0.5rem;
--shadow: 0 10px 30px rgba(10, 14, 23, 0.12);
}
.dark {
--background: 229 84% 5%;
--foreground: 210 40% 98%;
--card: 222 47% 11%;
--card-foreground: 210 40% 98%;
--primary: 210 75% 37%;
--primary-foreground: 0 0% 100%;
--secondary: 217 33% 17%;
--secondary-foreground: 210 40% 98%;
--muted: 217 33% 17%;
--muted-foreground: 215 20% 65%;
--accent: 217 33% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 217 33% 17%;
--input: 217 33% 17%;
--ring: 210 75% 37%;
}
}2 free exports left today · Go Pro for unlimited
A free, in-browser theme editor for shadcn/ui-style design systems. Edit the full light and dark token set — background, foreground, primary, secondary, muted, accent, destructive, border, ring — plus border radius, shadows and typography, with a realistic live component preview. Then export the code.
No. The theme studio runs entirely in your browser and is free with no sign-up. It uses no AI credits.
shadcn globals.css (HSL :root and .dark blocks), plain CSS variables, a Tailwind theme config, or JSON tokens. Copy or download any of them in one click.
Yes. It calculates the WCAG contrast ratio for key pairs — text on background, primary buttons and muted text — and flags whether each passes AA or AAA.
Yes. Paste your existing globals.css (the :root and .dark blocks, in HSL or hex) and the editor loads it so you can keep tweaking. You can also start from 12+ built-in presets or randomize a harmonious palette.
Every change is saved in your browser, and the Share button copies a URL that encodes your full theme so you can send it or reopen it later.