Loading…
@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%;
--popover: 0 0% 100%;
--popover-foreground: 229 84% 5%;
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 210 75% 37%;
--chart-1: 239 84% 67%;
--chart-2: 189 94% 43%;
--chart-3: 160 84% 39%;
--chart-4: 38 92% 50%;
--chart-5: 0 84% 60%;
--sidebar: 210 40% 98%;
--sidebar-foreground: 222 47% 11%;
--sidebar-primary: 210 75% 37%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 222 47% 11%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 210 75% 37%;
--radius: 0.5rem;
--shadow: 0 10px 30px rgba(10, 14, 23, 0.12);
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--text-xs: 0.694rem;
--text-sm: 0.833rem;
--text-base: 1rem;
--text-lg: 1.2rem;
--text-xl: 1.44rem;
--text-2xl: 1.728rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--spacing: 0.25rem;
}
.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%;
--popover: 222 47% 11%;
--popover-foreground: 210 40% 98%;
--border: 217 33% 17%;
--input: 217 33% 17%;
--ring: 210 75% 37%;
--chart-1: 234 89% 74%;
--chart-2: 188 86% 53%;
--chart-3: 158 64% 52%;
--chart-4: 43 96% 56%;
--chart-5: 0 91% 71%;
--sidebar: 222 47% 11%;
--sidebar-foreground: 210 40% 98%;
--sidebar-primary: 210 75% 37%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 217 33% 17%;
--sidebar-ring: 210 75% 37%;
}
}2 free exports left today · Go Pro for unlimited
Exports a type scale (--text-xs…2xl), radius scale (--radius-sm…xl) and --spacing.
Quick answer
A premium, in-browser studio with two modes: a full shadcn theme editor (light & dark tokens, WCAG contrast, export to globals.css / Tailwind / JSON) and a creative Component Lab — gradients, glassmorphism, colored shadows, glow and hover — that always exports valid CSS & React. Free, no sign-up.
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.
A creative mode for styling a single component — button, card, badge or input. Choose a solid, gradient or glassmorphism fill, add colored shadows and glow, tune border, radius, padding, typography and a hover effect, then export clean CSS or React. Because everything is generated from controls, the exported code is always valid — you can't break it.