Skip to content
Codex DesignBETA
English
Install

shadcn theme generator.

Pick a brand color, a corner radius and a font, and get a complete shadcn/ui theme, light and dark, previewed on real shadcn components. Export it as globals.css, a DESIGN.md or a shadcn registry file. It runs in your browser, so nothing you pick is uploaded.

Radius
Create projectDeploy your new project in one click.
Total revenue$45,231.89+20.1% from last month
Email notificationsGet a summary of activity every week.
NewSecondaryOutline
/* My theme — https://codexdesign.io/tools/shadcn-theme-generator */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=JetBrains+Mono:wght@400&display=swap");
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.5rem;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --background: oklch(0.99 0.005 258.324);
  --foreground: oklch(0.149 0.009 263.967);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.149 0.009 263.967);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.149 0.009 263.967);
  --primary: oklch(0.573 0.199 261.837);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.966 0.009 258.336);
  --secondary-foreground: oklch(0.209 0.01 268.187);
  --muted: oklch(0.966 0.009 258.336);
  --muted-foreground: oklch(0.54 0.021 261.3);
  --accent: oklch(0.95 0.024 262.095);
  --accent-foreground: oklch(0.209 0.01 268.187);
  --destructive: oklch(0.578 0.236 27.389);
  --border: oklch(0.921 0.008 260.732);
  --input: oklch(0.921 0.008 260.732);
  --ring: oklch(0.573 0.199 261.837);
  --chart-1: oklch(0.573 0.199 261.837);
  --chart-2: oklch(0.65 0.159 321.917);
  --chart-3: oklch(0.65 0.161 51.607);
  --chart-4: oklch(0.65 0.144 112.121);
  --chart-5: oklch(0.651 0.111 201.755);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.149 0.009 263.967);
  --sidebar-primary: oklch(0.573 0.199 261.837);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.95 0.024 262.095);
  --sidebar-accent-foreground: oklch(0.209 0.01 268.187);
  --sidebar-border: oklch(0.921 0.008 260.732);
  --sidebar-ring: oklch(0.573 0.199 261.837);
}

.dark {
  --background: oklch(0.144 0.009 262.987);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0.01 268.174);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0.01 268.174);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.72 0.145 261.777);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.271 0.009 255.578);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.271 0.009 255.578);
  --muted-foreground: oklch(0.71 0.019 261.324);
  --accent: oklch(0.301 0.049 261.495);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.188 22.146);
  --border: oklch(0.301 0.008 264.452);
  --input: oklch(0.34 0.007 264.469);
  --ring: oklch(0.72 0.145 261.777);
  --chart-1: oklch(0.7 0.157 261.589);
  --chart-2: oklch(0.721 0.16 321.596);
  --chart-3: oklch(0.72 0.16 51.708);
  --chart-4: oklch(0.719 0.159 111.848);
  --chart-5: oklch(0.721 0.123 201.605);
  --sidebar: oklch(0.205 0.01 268.174);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.72 0.145 261.777);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.301 0.049 261.495);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.301 0.008 264.452);
  --sidebar-ring: oklch(0.72 0.145 261.777);
}

@theme inline {
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
  }
}
Design systems with a similar color

Runs in your browser. Nothing you add here is uploaded or stored.

How to make a shadcn theme

  1. Choose your brand color. Pick it with the swatch, or type it as HEX, rgb(), hsl() or oklch(). It becomes primary and the focus ring, and it starts at #2F6FEB.
  2. Pick a radius from 0, 0.25, 0.5, 0.75 and 1, in rem, so 0.5 is 8px. It starts at 0.5.
  3. Pick a font from nine: Inter, Geist, DM Sans, Manrope, Plus Jakarta Sans, IBM Plex Sans, Space Grotesk, Source Serif 4 and Fraunces. It’s used for headings and body text, and it starts at Manrope.
  4. Switch between Light and Dark above the preview. The preview is a sample dashboard built from shadcn components: a create-project form, a revenue card with bars in the five chart colors, a switch, badges and a destructive button.
  5. Export the theme from the three tabs under the preview: globals.css, DESIGN.md and shadcn registry JSON. Each one has Copy and Download.
  6. See similar systems. Under the exports, the page lists the three design systems from our library whose main color is closest to yours.

What’s in the theme

  • All 23 color variables of a shadcn theme, in light and dark, as oklch() values: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring and chart-1 to chart-5, with a foreground color for card, popover, primary, secondary, muted and accent. The globals.css file adds the eight sidebar variables, taken from them.
  • Radius. --radius follows your choice, and the small, medium, large and extra-large corner sizes are worked out from it.
  • Font. Your font is the heading and body font, with JetBrains Mono for code, and the file imports all of them from Google Fonts.

The three exports

  • globals.css is a stylesheet for a Tailwind v4 project with shadcn/ui: the font import, a :root block with the light colors, radius and fonts, a .dark block with the dark colors, and the @theme inline block that maps the variables to Tailwind’s color classes.
  • DESIGN.md is a file for Codex and other agents: the light theme’s colors (secondary and tertiary are its second and third chart colors), a type scale in your font, the corner radii, spacing on a 4px base, a primary button, and short notes under the format’s section headings. The notes are generic, so add your own rules.
  • shadcn registry JSON is the theme as a shadcn registry item of type registry:theme, named my-theme, with the fonts, radius and light and dark colors. It’s for putting the theme in a shadcn registry, where it can be added with npx shadcn add and a URL, the way the design system library installs its themes.

Use it with Codex

  1. Add the theme to your project. Replace the color, radius and font variables in your globals.css with the exported ones, in both :root and .dark.
  2. Save the DESIGN.md at the root of your project and point to it from AGENTS.md, as the DESIGN.md guide shows.
  3. Ask Codex to use the tokens, not its own colors:
Apply the shadcn theme
Apply the theme in [the exported globals.css] to this shadcn/ui project: replace the color, --radius and font variables in our globals.css with the ones in the theme, in both :root and .dark, and keep everything else in the file. Then restyle [the dashboard page] using only shadcn components and theme tokens such as bg-primary and text-muted-foreground. Don't hard-code colors, and list any component that still has one.

Frequently asked questions

Is it free?

Yes. It’s free, with no sign-up and no limit on how many themes you make.

Are my colors uploaded?

No. The theme is made in your browser, and your color and settings aren’t sent or stored. The preview loads the font you pick from Google Fonts, and that request names the font, not your colors. The site only counts that the tool was used.

How does it make a whole theme from one color?

It works in OKLCH. Your color becomes primary and the focus ring. The backgrounds, borders and grays take fixed lightness values and carry a trace of your hue. Text on the primary color is white or black, whichever has more contrast, so it always reaches at least 4.5:1. The five chart colors step around the hue wheel from your color, and destructive is shadcn’s default red. In dark mode, a dark brand color is lifted to at least 0.72 lightness so it still stands out. Because the rules are fixed, the same color always gives the same theme, so treat it as a starting point to refine. To check other pairs, such as muted text on your own backgrounds, use the contrast checker.

How is it different from tweakcn?

tweakcn is an open-source visual editor where every shadcn variable is a slider or color picker, so use it when you want hands-on control. This generator is the quick start: one color in, a complete light and dark theme out, with a DESIGN.md for Codex. Our comparison with tweakcn has the details. And if you’d rather start from a fully designed system than from one color, browse the design system library, where every system comes with a shadcn theme.

Keep reading

An independent plugin for Codex. Not affiliated with or endorsed by OpenAI.