# Themes

> Learn how to install our free themes directly in your shadcn/ui project, or import them into your Figma file as a new style.

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

## Using CSS from the Theme Generator

If you created a theme in our [Theme Generator](/theme-generator) and copied the CSS, use it in your project like this:

1. Make sure you have shadcn/ui installed.
2. Paste the CSS into your global stylesheet (e.g. `app/globals.css`). Replace the `@theme inline`, `:root`, and `.dark` blocks with the properties you copied.
3. Load the fonts used by your theme. The generator shows the font names (e.g. Inter, Geist). Add the corresponding Google Fonts (or other) `<link>` in your root layout (`layout.tsx`) so `--font-sans` and `--font-heading` resolve correctly.

After that, your components use the new theme variables automatically.

## Free themes installation

If you want to install our free [themes](/themes), you can install them with the latest shadcn CLI 3.0. Themes are CSS-only, so they work with both the Radix UI and Base UI versions of shadcn/ui.

1. Ensure shadcn/ui is installed in your project. If not, [install it](https://ui.shadcn.com/docs/installation) now.
2. Copy the CLI command from our <Link href="/themes">Themes</Link> page. For example: `npx shadcn@latest add @shadcndesign/theme-sketchpad`
3. Run the command in your project's terminal.
4. After installation, import the font used by the chosen theme in your `layout.tsx` file.

## Importing themes into Figma

You can import a theme into the shadcn/ui kit for Figma as a **new style** and start designing with it in minutes. Because a custom theme is a mode in the Style collection, it lives alongside the 8 built-in styles and you can switch to it on any page or frame.

1. Open your shadcn/ui kit for Figma file.
2. Choose a theme and copy its CSS.
3. Open the <Link href='https://www.figma.com/community/plugin/1427238109341529865/figma-to-shadcn-ui' target='_blank' rel='noopener noreferrer'>Figma to shadcn/ui</Link> plugin.
4. Go to the **Import** tab.
5. Choose **Add as a new style** and pick which of the 8 built-in styles to base it on (default Nova).
6. Paste the copied CSS into the text area.
7. Click **Import**. The plugin creates a new mode in the Style collection with the theme's colors, radius, and fonts applied.

You can also choose **Overwrite an existing style** if you'd rather replace one of the built-in styles with the imported values instead of adding a new mode. Note that adding a new mode is subject to your Figma plan's modes-per-collection limit (the Style collection already has 8) — if adding isn't available on your plan, use Overwrite. {/* TODO: verify current Figma per-plan mode limits */}