# Theming

> The shadcn/ui kit for Figma is designed to let designers apply their project's brand styling in minutes, and to give developers straightforward access to that styling for seamless application to shadcn/ui code.

Canonical: https://www.shadcndesign.com/docs/theming

## How theming works

A theme is the set of **colors, fonts, and radius values** layered on top of a style. You customize it by editing the color pairs in the **Style** collection — not on individual components. Because colors resolve through the active style, one edit updates every component that uses that token, in the right style and the right light/dark mode.

The three axes stay independent:

- **Style** (Nova…Lyra) — structure and density. See [styles](/docs/styles).
- **Theme** — the `color/light/*` + `color/dark/*` color pairs, fonts, and the radius ramp, all in the Style collection.
- **Light/dark** — the `Mode` collection (Light or Dark). It never holds colors of its own — it only switches between the Style collection's light and dark definitions.

**Important:** Make sure your main library file is open — the shadcn/ui kit Figma file where all your components live.

## Editing your theme colors

You recolor a theme by editing the `color/light/{token}` and `color/dark/{token}` pairs in the Style collection. Each base pair aliases a Tailwind palette variable (the kit ships on the `neutral` family, with `destructive` on `red`). The `custom/*` and `alpha/*` tints under the same `color/light|dark/*` groups are aliases with opacity that point at those base tokens (`custom/primary-muted` is `primary` at 5%), so whatever you set a base token to, its tints follow in that style. There is nothing to recompute.

You can make an edit for **one style** (change the pair only in that style's mode) or **across all 8 styles** (change it in every mode).

### Changing the primary color

#### Method 1: Use a Tailwind color

To change the primary color from Neutral to Blue:

1. Open the variables panel.
2. Switch to the **Style** collection.
3. Find `color/light/primary` and click its value field.
4. Select the `colors/blue/600` variable from the Tailwind collection.
5. Find `color/dark/primary` and set it to `colors/blue/600` as well.

After a moment, Figma updates the primary color for every component in that style. Every primary tint (`custom/primary-muted`, `custom/primary-hover`, `custom/selected-wash`, `custom/primary-border`) follows automatically, because those tokens are `primary` at a percentage rather than stored colors.

#### Method 2: Use a custom color

To change the primary color to a custom purple (#7C3AED):

1. Open the variables panel and switch to the **Style** collection.
2. Find `color/light/primary`, unlink its current value, and enter `#7C3AED`.
3. Find `color/dark/primary`, unlink its value, and enter `#7C3AED`.

This still works in kit 3.0: the primary tints alias `color/light/primary` and `color/dark/primary` themselves, so they pick up the purple too. If you plan to reuse the color elsewhere, the cleaner option is to add it to the Tailwind collection first (for example `colors/brand/600`) and alias it from the pair, which keeps every color in the file traceable to the palette.

### Changing neutral colors

The kit itself ships on the `neutral` family: `background`, `foreground`, `card`, `popover`, `secondary`, `muted`, `accent`, `border`, `input`, `ring`, and the `sidebar-*` tokens alias `colors/neutral/50` through `colors/neutral/950` (plus `colors/white` and `colors/black`). One exception is kept on zinc: light `muted-foreground` aliases `colors/zinc/500`.

To move to Slate, Stone, Zinc, or another family, re-point those `color/light/*` and `color/dark/*` pairs in the Style collection to the same step of the new family (for example `colors/neutral/200` to `colors/slate/200`). Do it in one style's mode or in all eight. The neutral tints in `custom/*` and `alpha/*` follow, since they are aliases with opacity on these base tokens. Tokens built from `colors/white` or `colors/black` at an opacity (dark `border` is `colors/white` at 10%, dark `input` is `colors/white` at 15%) are family-independent and need no change.

### Changing the font family

Fonts are set once for the whole file. The defaults are **Inter** (sans and heading) and **Geist Mono** (mono).

1. Open the variables panel and switch to the **Style** collection.
2. Find the `font/family/*` variables (`sans`, `serif`, `mono`, `heading`).
3. Change the value to your preferred font (for example, `sans` to Roboto).

Enter the font family name exactly. The change applies file-wide.

### Changing border radius

Radius is controlled by the per-style ramp `radius/xs…4xl` in the Style collection. Each style has its own ramp (Sera and Lyra are square; Luma and Maia are round). Components reference the ramp through the Tailwind collection's `rounded/*` aliases, so editing the ramp here restyles everything bound to it.

1. Open the variables panel and switch to the **Style** collection.
2. Find the `radius/*` ramp for the style you're editing.
3. Adjust the ramp steps to make components more or less rounded.

| Variable    | Purpose                                                                |
| ----------- | ---------------------------------------------------------------------- |
| `radius/sm` | Subtle rounding on compact elements like tags, chips, and small badges |
| `radius/md` | Buttons, inputs, cards, and most common UI elements                    |
| `radius/lg` | Prominent elements like modals, larger cards, and feature sections     |
| `radius/xl` | Very prominent elements, floating panels, and heavier rounding         |

### Using an inverted menu color

In shadcn/create you can invert menu color so select and dropdown menus appear dark in light mode. To do the same in the kit:

1. Open the Dropdown Menu component.
2. Select the `DropdownMenu / Menu` component.
3. In the Appearance panel, set its Mode to `Dark`.

## Creating a custom theme

A custom theme is a **new mode in the Style collection**, based on any of the 8 built-in styles. This keeps your brand theme alongside the built-ins, so you can switch to it like any other style.

### The fast way: import from globals.css

The quickest path is the [Figma to shadcn/ui plugin](/plugin):

1. Copy your theme's `globals.css` (for example from our [Theme Generator](/theme-generator) or an existing project).
2. Open the plugin and go to the Import tab.
3. Choose **Add as a new style**, and pick which of the 8 styles to base it on (default Nova).
4. Paste the CSS and import. The plugin creates a new Style-collection mode with your colors, radius, and fonts applied.

Your brand theme now appears as a mode you can switch to on any page or frame. See the [themes documentation](/docs/themes) for the full import walkthrough.

### The manual way: add a Style mode

You can also add a mode by hand:

1. Open the Local variables panel and select the **Style** collection.
2. Click **+** in the modes header to add a new mode.
3. Rename it (for example, "Brand A" or "High Contrast").
4. Adjust the `color/light/*`, `color/dark/*`, `font/family/*`, and `radius/*` values to match your brand.

<Callout type="warning">
  Figma limits variable modes per collection by plan, and the Style collection
  already ships with 8 modes. Adding a 9th may only be possible on plans with a
  higher mode limit — if adding a mode isn't available on your plan, overwrite
  one of the built-in styles instead (duplicate the file first to keep a
  pristine copy).{" "}
  {/* TODO: verify current Figma per-plan mode limits and state them precisely */}
</Callout>

### Adding a new color variable

If your brand truly needs a token that shadcn/ui doesn't have, add it consistently:

1. Add `color/light/{name}` and `color/dark/{name}` to the Style collection, each aliasing a Tailwind palette variable (add the color to the Tailwind collection first if the palette lacks it).
2. Add `{name}` (or `custom/{name}`) to the Mode collection, referencing the light/dark pair.
3. For a tint of it (a hover wash, a muted background), add `color/light/custom/{name}-muted` and its dark pair, alias the base token, and set the opacity percentage in the variable panel. This is Figma's alias with opacity, the same mechanism the kit's own `custom/*` tokens use, so the tint follows the base if you recolor later. Do not enter a flattened color.
4. Set the variable's scope so it appears where you need it.
5. Use it in components.
6. Export it to your `globals.css` with the [Figma to shadcn/ui plugin](/plugin).

Before adding new variables, check the existing shadcn/ui and `custom/*` tokens in the [variables documentation](/docs/variables) — most needs are already covered, and unnecessary variables complicate a design system.

## Working with text and effect styles

Typography and effects are delivered as Figma **styles** that reference the Style collection's variables.

- **Text styles** cover the full ramp, including mono and heading variants, using the `font/family/*`, `font-weight/*`, and `text/*` variables (sizes and pixel line-heights, including the `lh-tight`…`lh-loose` leading steps). Create a new one by styling a text element with those variables and saving it as a text style.
- **Focus rings and shadows are effect styles** (`focus/*` and `shadow/*`) with variables bound inside them. Apply the effect style to a component rather than rebuilding the effect by hand.

For long-form and markdown content, the kit also provides the Typeset system — see the [Typeset documentation](/docs/typeset).

## Dark mode

Switching between light and dark is a `Mode` collection change.

### How it works

The kit ships Light and Dark modes in the `Mode` collection. Every `custom/*` and semantic token already carries both halves, so a single switch flips the whole design.

### How to use

1. Select any page or frame.
2. Click the **Change variables mode** icon in the Layers panel.
3. Choose the **Mode** collection.
4. Select **Light** or **Dark**.

## Multi-brand design systems

To maintain several brand themes in one file, add a mode per brand in the **Style** collection (as in "Creating a custom theme" above), then switch between them:

1. Select any page or frame.
2. Click the **Change variables mode** icon.
3. Choose the **Style** collection.
4. Select your brand mode (for example "Brand A").

Each brand keeps the full component structure while carrying its own colors, fonts, and radius.