Theme Generator

The Theme Generator helps you create a shadcn/ui theme visually and export it as CSS variables. Every Shadcn UI Kit component, block and template reads these variables, so one theme changes the look of everything.

Create a theme

  1. Open the generator.
  2. Start from a preset such as Zinc, Blue, Green, Rose, Violet, Orange or Amber.
  3. Adjust every color token, including background, foreground, card, popover, muted, accent, destructive, border, ring, sidebar and the five chart colors.
  4. Set the typography (font family, size, weight and line height), spacing, radius and shadows.
  5. Switch between light and dark mode and tune each one separately. The canvas shows the result on real components as you go.

Export

Open the code view and copy the CSS. It contains a :root block for light mode and a .dark block for dark mode, with colors in oklch(). Paste both blocks into your global CSS file and replace the existing theme variables.

If you picked one of the supported Google fonts, the code view also shows how to load it in your project.

Save and share

You can save themes in your browser and share a theme with a link when you are signed in.

Page BuilderTeams