Documentation

Theming

Using CSS Variables and color utilities for theming.

You can choose between using CSS variables (recommended) or utility classes for theming.

CSS Variables

<div className="bg-background text-foreground" />

To use CSS variables for theming set tailwind.cssVariables to true in your components.json file.

components.json

{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Utility classes

<div className="bg-zinc-950 dark:bg-white" />

To use utility classes for theming set tailwind.cssVariables to false in your components.json file.

components.json

{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Convention

We use a simple background and foreground convention for colors. The background variable is used for the background color of the component and the foreground variable is used for the text color.

The background suffix is omitted when the variable is used for the background color of the component.

Given the following CSS variables:

--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);

The background color of the following component will be var(--primary) and the foreground color will be var(--primary-foreground).

<div className="bg-primary text-primary-foreground">Hello</div>

List of variables

Here's the list of variables available for customization:

app/globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
}

Adding new colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.

app/globals.css

:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}
 
.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}
 
@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

You can now use the warning utility class in your components.

<div className="bg-warning text-warning-foreground" />

Other color formats

See the Tailwind CSS documentation for more information on using colors in Tailwind CSS.

Base Colors

For reference, here's a list of the base colors that are available.

Neutral

app/globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

Stone

app/globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.25);
  --primary: oklch(0.216 0.006 56.043);
  --primary-foreground: oklch(0.985 0.001 106.423);
  --secondary: oklch(0.97 0.001 106.424);
  --secondary-foreground: oklch(0.216 0.006 56.043);
  --muted: oklch(0.97 0.001 106.424);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --accent: oklch(0.97 0.001 106.424);
  --accent-foreground: oklch(0.216 0.006 56.043);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.923 0.003 48.717);
  --input: oklch(0.923 0.003 48.717);
  --ring: oklch(0.709 0.01 56.259);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0.001 106.423);
  --sidebar-foreground: oklch(0.147 0.004 49.25);
  --sidebar-primary: oklch(0.216 0.006 56.043);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.97 0.001 106.424);
  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
  --sidebar-border: oklch(0.923 0.003 48.717);
  --sidebar-ring: oklch(0.709 0.01 56.259);
}
 
.dark {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --primary: oklch(0.923 0.003 48.717);
  --primary-foreground: oklch(0.216 0.006 56.043);
  --secondary: oklch(0.268 0.007 34.298);
  --secondary-foreground: oklch(0.985 0.001 106.423);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.216 0.006 56.043);
  --sidebar-foreground: oklch(0.985 0.001 106.423);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
  --sidebar-accent: oklch(0.268 0.007 34.298);
  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.553 0.013 58.071);
}

Zinc

app/globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}
 
.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

Gray

app/globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.028 261.692);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.028 261.692);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.028 261.692);
  --primary: oklch(0.21 0.034 264.665);
  --primary-foreground: oklch(0.985 0.002 247.839);
  --secondary: oklch(0.967 0.003 264.542);
  --secondary-foreground: oklch(0.21 0.034 264.665);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.027 264.364);
  --accent: oklch(0.967 0.003 264.542);
  --accent-foreground: oklch(0.21 0.034 264.665);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --ring: oklch(0.707 0.022 261.325);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0.002 247.839);
  --sidebar-foreground: oklch(0.13 0.028 261.692);
  --sidebar-primary: oklch(0.21 0.034 264.665);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.967 0.003 264.542);
  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
  --sidebar-border: oklch(0.928 0.006 264.531);
  --sidebar-ring: oklch(0.707 0.022 261.325);
}
 
.dark {
  --background: oklch(0.13 0.028 261.692);
  --foreground: oklch(0.985 0.002 247.839);
  --card: oklch(0.21 0.034 264.665);
  --card-foreground: oklch(0.985 0.002 247.839);
  --popover: oklch(0.21 0.034 264.665);
  --popover-foreground: oklch(0.985 0.002 247.839);
  --primary: oklch(0.928 0.006 264.531);
  --primary-foreground: oklch(0.21 0.034 264.665);
  --secondary: oklch(0.278 0.033 256.848);
  --secondary-foreground: oklch(0.985 0.002 247.839);
  --muted: oklch(0.278 0.033 256.848);
  --muted-foreground: oklch(0.707 0.022 261.325);
  --accent: oklch(0.278 0.033 256.848);
  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.034 264.665);
  --sidebar-foreground: oklch(0.985 0.002 247.839);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.278 0.033 256.848);
  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

Slate

app/globals.css

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}
 
.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

Available Themes

shadcn/ui includes a comprehensive collection of pre-built themes that you can use in your applications. These themes are defined in themes.css and can be applied by adding the corresponding theme class to your root element.

Color Themes

Blue

themes.css

.theme-blue .theme-container,
.theme-blue [data-radix-popper-content-wrapper] {
  --primary: var(--color-blue-700);
  --primary-foreground: var(--color-blue-50);
  --sidebar-primary: var(--color-blue-600);
  --sidebar-primary-foreground: var(--color-blue-50);
  --chart-1: var(--color-blue-300);
  --chart-2: var(--color-blue-500);
  --chart-3: var(--color-blue-600);
  --chart-4: var(--color-blue-700);
  --chart-5: var(--color-blue-800);
}

Green

themes.css

.theme-green .theme-container,
.theme-green [data-radix-popper-content-wrapper] {
  --primary: var(--color-lime-600);
  --primary-foreground: var(--color-lime-50);
  --ring: var(--color-lime-400);
  --chart-1: var(--color-green-300);
  --chart-2: var(--color-green-500);
  --chart-3: var(--color-green-600);
  --chart-4: var(--color-green-700);
  --chart-5: var(--color-green-800);
  --sidebar-primary: var(--color-lime-600);
  --sidebar-primary-foreground: var(--color-lime-50);
  --sidebar-ring: var(--color-lime-400);
}

Amber

themes.css

.theme-amber .theme-container,
.theme-amber [data-radix-popper-content-wrapper] {
  --primary: var(--color-amber-600);
  --primary-foreground: var(--color-amber-50);
  --ring: var(--color-amber-400);
  --chart-1: var(--color-amber-300);
  --chart-2: var(--color-amber-500);
  --chart-3: var(--color-amber-600);
  --chart-4: var(--color-amber-700);
  --chart-5: var(--color-amber-800);
  --sidebar-primary: var(--color-amber-600);
  --sidebar-primary-foreground: var(--color-amber-50);
  --sidebar-ring: var(--color-amber-400);
}

Rose

themes.css

.theme-rose .theme-container,
.theme-rose [data-radix-popper-content-wrapper] {
  --primary: var(--color-rose-600);
  --primary-foreground: var(--color-rose-50);
  --ring: var(--color-rose-400);
  --chart-1: var(--color-rose-300);
  --chart-2: var(--color-rose-500);
  --chart-3: var(--color-rose-600);
  --chart-4: var(--color-rose-700);
  --chart-5: var(--color-rose-800);
  --sidebar-primary: var(--color-rose-600);
  --sidebar-primary-foreground: var(--color-rose-50);
  --sidebar-ring: var(--color-rose-400);
}

Purple

themes.css

.theme-purple .theme-container,
.theme-purple [data-radix-popper-content-wrapper] {
  --primary: var(--color-purple-600);
  --primary-foreground: var(--color-purple-50);
  --ring: var(--color-purple-400);
  --chart-1: var(--color-purple-300);
  --chart-2: var(--color-purple-500);
  --chart-3: var(--color-purple-600);
  --chart-4: var(--color-purple-700);
  --chart-5: var(--color-purple-800);
  --sidebar-primary: var(--color-purple-600);
  --sidebar-primary-foreground: var(--color-purple-50);
  --sidebar-ring: var(--color-purple-400);
}

Orange

themes.css

.theme-orange .theme-container,
.theme-orange [data-radix-popper-content-wrapper] {
  --primary: var(--color-orange-600);
  --primary-foreground: var(--color-orange-50);
  --ring: var(--color-orange-400);
  --chart-1: var(--color-orange-300);
  --chart-2: var(--color-orange-500);
  --chart-3: var(--color-orange-600);
  --chart-4: var(--color-orange-700);
  --chart-5: var(--color-orange-800);
  --sidebar-primary: var(--color-orange-600);
  --sidebar-primary-foreground: var(--color-orange-50);
  --sidebar-ring: var(--color-orange-400);
}

Teal

themes.css

.theme-teal .theme-container,
.theme-teal [data-radix-popper-content-wrapper] {
  --primary: var(--color-teal-600);
  --primary-foreground: var(--color-teal-50);
  --chart-1: var(--color-teal-300);
  --chart-2: var(--color-teal-500);
  --chart-3: var(--color-teal-600);
  --chart-4: var(--color-teal-700);
  --chart-5: var(--color-teal-800);
  --sidebar-primary: var(--color-teal-600);
  --sidebar-primary-foreground: var(--color-teal-50);
  --sidebar-ring: var(--color-teal-400);
}

Red

themes.css

.theme-red .theme-container,
.theme-red [data-radix-popper-content-wrapper] {
  --primary: var(--color-red-600);
  --primary-foreground: var(--color-red-50);
  --ring: var(--color-red-400);
  --chart-1: var(--color-red-300);
  --chart-2: var(--color-red-500);
  --chart-3: var(--color-red-600);
  --chart-4: var(--color-red-700);
  --chart-5: var(--color-red-800);
  --sidebar-primary: var(--color-red-600);
  --sidebar-primary-foreground: var(--color-red-50);
  --sidebar-ring: var(--color-red-400);
}

Yellow

themes.css

.theme-yellow .theme-container,
.theme-yellow [data-radix-popper-content-wrapper] {
  --primary: var(--color-yellow-400);
  --primary-foreground: var(--color-yellow-900);
  --ring: var(--color-yellow-400);
  --chart-1: var(--color-yellow-300);
  --chart-2: var(--color-yellow-500);
  --chart-3: var(--color-yellow-600);
  --chart-4: var(--color-yellow-700);
  --chart-5: var(--color-yellow-800);
  --sidebar-primary: var(--color-yellow-600);
  --sidebar-primary-foreground: var(--color-yellow-50);
  --sidebar-ring: var(--color-yellow-400);
}

Violet

themes.css

.theme-violet .theme-container,
.theme-violet [data-radix-popper-content-wrapper] {
  --primary: var(--color-violet-600);
  --primary-foreground: var(--color-violet-50);
  --ring: var(--color-violet-400);
  --chart-1: var(--color-violet-300);
  --chart-2: var(--color-violet-500);
  --chart-3: var(--color-violet-600);
  --chart-4: var(--color-violet-700);
  --chart-5: var(--color-violet-800);
  --sidebar-primary: var(--color-violet-600);
  --sidebar-primary-foreground: var(--color-violet-50);
  --sidebar-ring: var(--color-violet-400);
}

Brand Themes

ChatGPT

themes.css

.theme-chatgpt .theme-container,
.theme-chatgpt [data-radix-popper-content-wrapper] {
  --primary: var(--color-emerald-600);
  --primary-foreground: var(--color-emerald-50);
  --secondary: var(--color-emerald-100);
  --secondary-foreground: var(--color-emerald-900);
  --ring: var(--color-emerald-400);
  --chart-1: var(--color-emerald-300);
  --chart-2: var(--color-emerald-500);
  --chart-3: var(--color-emerald-600);
  --chart-4: var(--color-emerald-700);
  --chart-5: var(--color-emerald-800);
  --sidebar-primary: var(--color-emerald-600);
  --sidebar-primary-foreground: var(--color-emerald-50);
  --sidebar-ring: var(--color-emerald-400);
}

Claude

themes.css

.theme-claude .theme-container,
.theme-claude [data-radix-popper-content-wrapper] {
  --primary: #c96442;
  --primary-foreground: #ffffff;
  --muted: #f0eee6;
  --muted-foreground: #000000;
  --ring: #c96442;
  --chart-1: #f4a261;
  --chart-2: #e76f51;
  --chart-3: #c96442;
  --chart-4: #a0522d;
  --chart-5: #8b4513;
  --sidebar-primary: #c96442;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-ring: #c96442;
}

Grok

themes.css

.theme-grok .theme-container,
.theme-grok [data-radix-popper-content-wrapper] {
  --primary: var(--color-gray-800);
  --primary-foreground: var(--color-gray-50);
  --background: var(--color-gray-100);
  --foreground: var(--color-gray-900);
  --ring: var(--color-gray-400);
  --chart-1: var(--color-gray-300);
  --chart-2: var(--color-gray-500);
  --chart-3: var(--color-gray-600);
  --chart-4: var(--color-gray-700);
  --chart-5: var(--color-gray-800);
  --sidebar-primary: var(--color-gray-800);
  --sidebar-primary-foreground: var(--color-gray-50);
  --sidebar-ring: var(--color-gray-400);
}

Twitter

themes.css

.theme-twitter .theme-container,
.theme-twitter [data-radix-popper-content-wrapper] {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1884 0.0128 248.5103);
  --card: oklch(0.9784 0.0011 197.1387);
  --card-foreground: oklch(0.1884 0.0128 248.5103);
  --primary: oklch(0.6723 0.1606 244.9955);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.1884 0.0128 248.5103);
  --secondary-foreground: oklch(1 0 0);
  --radius: 1.3rem;
}

Specialized Themes

Elegant Night

themes.css

.theme-elegant-night .theme-container,
.theme-elegant-night [data-radix-popper-content-wrapper] {
  --background: oklch(0.98 0.006 240);
  --foreground: oklch(0.18 0.02 270);
  --primary: oklch(0.45 0.15 260);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.42 0.12 260);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.92 0.01 240);
  --muted-foreground: oklch(0.45 0.02 270);
  --accent: oklch(0.65 0.15 260);
  --accent-foreground: oklch(0 0 0);
}

Neobrutalism

themes.css

.theme-neobrutalism .theme-container,
.theme-neobrutalism [data-radix-popper-content-wrapper] {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --primary: oklch(0.6489 0.237 26.9728);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.968 0.211 109.7692);
  --secondary-foreground: oklch(0 0 0);
  --muted: oklch(0.9551 0 0);
  --muted-foreground: oklch(0.3211 0 0);
  --accent: oklch(0.5635 0.2408 260.8178);
  --accent-foreground: oklch(1 0 0);
  --radius: 0px;
}

Linear

themes.css

.theme-linear .theme-container,
.theme-linear [data-radix-popper-content-wrapper] {
  --background: oklch(0.99 0.002 240);
  --foreground: oklch(0.12 0.002 240);
  --primary: oklch(0.55 0.12 260);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.12 0.002 240);
  --secondary-foreground: oklch(0.99 0.002 240);
  --muted: oklch(0.94 0.002 240);
  --muted-foreground: oklch(0.48 0.002 240);
  --accent: oklch(0.88 0.02 240);
  --accent-foreground: oklch(0 0 0);
  --radius: 0.375rem;
}

Sketchpad

themes.css

.theme-sketchpad .theme-container,
.theme-sketchpad [data-radix-popper-content-wrapper] {
  --background: oklch(0.97 0.01 100);
  --foreground: oklch(0.35 0.15 260);
  --primary: oklch(0.25 0.12 260);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9 0.01 100);
  --secondary-foreground: oklch(0.25 0.002 240);
  --muted: oklch(0.85 0.05 240);
  --muted-foreground: oklch(0.25 0.12 260);
  --accent: oklch(0.9 0.01 100);
  --accent-foreground: oklch(0 0 0);
  --radius: 0px;
}

Perplexity

themes.css

.theme-perplexity .theme-container,
.theme-perplexity [data-radix-popper-content-wrapper] {
  --background: oklch(0.99 0.002 100);
  --foreground: oklch(0.25 0.02 180);
  --primary: oklch(0.45 0.08 180);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9 0.01 180);
  --secondary-foreground: oklch(0.25 0.02 180);
  --muted: oklch(0.92 0.005 180);
  --muted-foreground: oklch(0.45 0.01 180);
  --accent: oklch(0.95 0.01 180);
  --accent-foreground: oklch(0 0 0);
  --radius: 0.75rem;
}

ElevenLabs

themes.css

.theme-elevenlabs .theme-container,
.theme-elevenlabs [data-radix-popper-content-wrapper] {
  --background: oklch(0.99 0.001 0);
  --foreground: oklch(0.15 0.01 0);
  --primary: oklch(0.15 0.01 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.45 0.01 0);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.92 0.005 0);
  --muted-foreground: oklch(0.45 0.01 0);
  --accent: oklch(0.6 0.12 260);
  --accent-foreground: oklch(0 0 0);
  --radius: 0.375rem;
}

8-bit Game Boy

themes.css

.theme-8bitgameboy .theme-container,
.theme-8bitgameboy [data-radix-popper-content-wrapper] {
  --background: oklch(0.25 0.08 120);
  --foreground: oklch(0.9 0.12 120);
  --primary: oklch(0.9 0.12 120);
  --primary-foreground: oklch(0.25 0.08 120);
  --secondary: oklch(0.5 0.2 120);
  --secondary-foreground: oklch(0.25 0.08 120);
  --muted: oklch(0.4 0.08 120);
  --muted-foreground: oklch(0.7 0.08 120);
  --accent: oklch(0.4 0.08 120);
  --accent-foreground: oklch(0.9 0.12 120);
  --radius: 0px;
}

Bubblegum

themes.css

.theme-bubblegum .theme-container,
.theme-bubblegum [data-radix-popper-content-wrapper] {
  --background: oklch(0.95 0.02 340);
  --foreground: oklch(0.35 0.01 0);
  --primary: oklch(0.55 0.12 340);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.7 0.05 180);
  --secondary-foreground: oklch(0.2 0.01 0);
  --muted: oklch(0.85 0.03 180);
  --muted-foreground: oklch(0.5 0.01 0);
  --accent: oklch(0.9 0.02 60);
  --accent-foreground: oklch(0.2 0.01 0);
  --radius: 0.4rem;
}

Soft Pop

themes.css

.theme-softpop .theme-container,
.theme-softpop [data-radix-popper-content-wrapper] {
  --background: oklch(0.9789 0.0082 121.6272);
  --foreground: oklch(0 0 0);
  --primary: oklch(0.5106 0.2301 276.9656);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.7038 0.123 182.5025);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.9551 0 0);
  --muted-foreground: oklch(0.3211 0 0);
  --accent: oklch(0.7686 0.1647 70.0804);
  --accent-foreground: oklch(0 0 0);
  --radius: 1rem;
}

Cyberpunk

themes.css

.theme-cyberpunk .theme-container,
.theme-cyberpunk [data-radix-popper-content-wrapper] {
  --background: oklch(0.9816 0.0017 247.839);
  --foreground: oklch(0.1649 0.0352 281.8285);
  --primary: oklch(0.6726 0.2904 341.4084);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9595 0.02 286.0164);
  --secondary-foreground: oklch(0.1649 0.0352 281.8285);
  --muted: oklch(0.9595 0.02 286.0164);
  --muted-foreground: oklch(0.1649 0.0352 281.8285);
  --accent: oklch(0.8903 0.1739 171.269);
  --accent-foreground: oklch(0.1649 0.0352 281.8285);
  --radius: 0.5rem;
}

Font Themes

Mono

themes.css

.theme-mono .theme-container,
.theme-mono [data-radix-popper-content-wrapper] {
  --font-sans: var(--font-mono);
  --primary: var(--color-stone-600);
  --primary-foreground: var(--color-stone-50);
  --sidebar-primary: var(--color-stone-600);
  --sidebar-primary-foreground: var(--color-stone-50);
  --sidebar-ring: var(--color-stone-400);
}

Inter

themes.css

.theme-inter .theme-container,
.theme-inter [data-radix-popper-content-wrapper] {
  --font-sans: var(--font-inter);
}

Noto Sans

themes.css

.theme-noto-sans .theme-container,
.theme-noto-sans [data-radix-popper-content-wrapper] {
  --font-sans: var(--font-noto-sans);
}

Nunito Sans

themes.css

.theme-nunito-sans .theme-container,
.theme-nunito-sans [data-radix-popper-content-wrapper] {
  --font-sans: var(--font-nunito-sans);
}

Figtree

themes.css

.theme-figtree .theme-container,
.theme-figtree [data-radix-popper-content-wrapper] {
  --font-sans: var(--font-figtree);
}

Border Radius Themes

Rounded None

themes.css

.theme-rounded-none .theme-container,
.theme-rounded-none [data-radix-popper-content-wrapper] {
  --radius: 0;
}

Rounded Small

themes.css

.theme-rounded-small .theme-container,
.theme-rounded-small [data-radix-popper-content-wrapper] {
  --radius: 0.4rem;
}

Rounded Medium

themes.css

.theme-rounded-medium .theme-container,
.theme-rounded-medium [data-radix-popper-content-wrapper] {
  --radius: 0.65rem;
}

Rounded Large

themes.css

.theme-rounded-large .theme-container,
.theme-rounded-large [data-radix-popper-content-wrapper] {
  --radius: 1rem;
}

Rounded Full

themes.css

.theme-rounded-full .theme-container,
.theme-rounded-full [data-radix-popper-content-wrapper] {
  --radius: 1.2rem;
}

Scale Theme

Scaled

themes.css

.theme-scaled .theme-container,
.theme-scaled [data-radix-popper-content-wrapper] {
  @media (min-width: 1024px) {
    --radius: 0.45em;
    --text-lg: 1rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.2rem;
    --text-3xl: 1.3rem;
    --text-4xl: 1.4rem;
    --text-5xl: 1.5rem;
    --text-6xl: 1.6rem;
    --text-7xl: 1.7rem;
    --text-8xl: 1.8rem;
    --text-base: 0.85rem;
    --text-sm: 0.8rem;
    --spacing: 0.2rem;
  }
}

Using Themes

To apply a theme to your application, add the corresponding theme class to your root element:

<html className="theme-blue">
  <body>{/* Your app content */}</body>
</html>

You can also combine multiple themes:

<html className="theme-blue theme-mono theme-rounded-large">
  <body>{/* Your app content */}</body>
</html>

All themes include both light and dark mode variants. The dark mode styles are automatically applied when the dark class is present on the root element.

About AI SDK Agents Changelog

Join Today

Copy and Paste 125+
ai sdk patterns.

Get early access pricing and shape the future of the product.