> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize your application's appearance using CSS variables and the shadcn/ui theming system.

The shadcn/ui theming system is built on CSS variables and Tailwind CSS, providing a flexible and powerful way to customize your application's appearance.

## Theming Approaches

You can choose between two approaches for theming:

### CSS Variables (Recommended)

```tsx /bg-background/ /text-foreground/ theme={null}
<div className="bg-background text-foreground" />
```

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

```json {8} title="components.json" theme={null}
{
  "style": "new-york",
  "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

```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/ theme={null}
<div className="bg-zinc-950 dark:bg-white" />
```

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

```json {8} title="components.json" theme={null}
{
  "style": "new-york",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": false
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
```

## Color 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.

<Note>
  The `background` suffix is omitted when the variable is used for the background color of the component.
</Note>

Given the following CSS variables:

```css theme={null}
--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)`.

```tsx theme={null}
<div className="bg-primary text-primary-foreground">Hello</div>
```

## Available CSS Variables

Here's the complete list of CSS variables available for customization:

```css title="app/globals.css" theme={null}
: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);
  --destructive-foreground: oklch(0.985 0 0);
  --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);
  --destructive-foreground: oklch(0.985 0 0);
  --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, add them to your CSS file under the `:root` and `dark` pseudo-classes, then use the `@theme inline` directive to make them available as CSS variables.

```css title="app/globals.css" theme={null}
: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:

```tsx /bg-warning/ /text-warning-foreground/ theme={null}
<div className="bg-warning text-warning-foreground" />
```

## Base Color Palettes

Shadcn/ui provides several base color palettes to choose from:

<Tabs items={["Neutral", "Zinc", "Slate", "Stone", "Gray"]}>
  <Tab value="Neutral">
    The default neutral color palette with minimal hue.

    ```css title="app/globals.css" theme={null}
    :root {
      --background: oklch(1 0 0);
      --foreground: oklch(0.145 0 0);
      --primary: oklch(0.205 0 0);
      --primary-foreground: oklch(0.985 0 0);
      /* ... */
    }
    ```
  </Tab>

  <Tab value="Zinc">
    A cool, slightly blue-tinted neutral palette.

    ```css title="app/globals.css" theme={null}
    :root {
      --background: oklch(1 0 0);
      --foreground: oklch(0.141 0.005 285.823);
      --primary: oklch(0.21 0.006 285.885);
      --primary-foreground: oklch(0.985 0 0);
      /* ... */
    }
    ```
  </Tab>

  <Tab value="Slate">
    A blue-gray palette with more saturation.

    ```css title="app/globals.css" theme={null}
    :root {
      --background: oklch(1 0 0);
      --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);
      /* ... */
    }
    ```
  </Tab>

  <Tab value="Stone">
    A warm, brown-tinted neutral palette.

    ```css title="app/globals.css" theme={null}
    :root {
      --background: oklch(1 0 0);
      --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);
      /* ... */
    }
    ```
  </Tab>

  <Tab value="Gray">
    A slightly purple-tinted gray palette.

    ```css title="app/globals.css" theme={null}
    :root {
      --background: oklch(1 0 0);
      --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);
      /* ... */
    }
    ```
  </Tab>
</Tabs>

## Color Formats

Shadcn/ui uses the OKLCH color format by default, which provides better perceptual uniformity than RGB or HSL. However, you can use any color format supported by Tailwind CSS.

For more information on color formats, see the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors).

## Border Radius

The `--radius` variable controls the default border radius for components:

```css theme={null}
:root {
  --radius: 0.625rem; /* 10px */
}
```

You can adjust this value to change the roundness of all components globally.