Manage variables

Use the Figma to shadcn/ui plugin to export and import design tokens between Figma and your Tailwind CSS projects.

Managing variables

The plugin features a Manage Variables tab for handling design tokens. It reads the file you have open and detects your kit automatically, then shows the matching Export and Import options — there is nothing to configure, and older kit files are recognized too.

If you are working in an older kit file, jump to Older kit files — that flow works exactly as before.

Export variables

The Export tab turns your Figma theme into a globals.css you can drop into a shadcn/ui project. You choose three things:

Style — pick one of the eight built-in styles (Nova, Vega, Mira, Luma, Sera, Maia, Rhea, Lyra). The export reflects that style's colors, radius ramp, and fonts. There is no longer a kit-version dropdown here — the plugin already knows which kit you are on.

Color format — how the color values are written:

OKLCH (default) — the format shadcn/ui ships today.
HSL — classic hsl() values.
RGB — plain rgb() values.

Display mode — how much of the theme is written out:

shadcn — the standard globals.css token set (the colors, radius, and fonts every shadcn/ui project expects). Your edits are layered on top of the style's defaults.
changed — only the values you actually changed versus the kit defaults, plus the explicit radius ramp. Handy when you want a small diff to review.
all — everything in shadcn, plus the kit's custom semantic tokens emitted as CSS variables and the --shadow-* values. Use this when you want the full token surface the kit uses internally, not just the shadcn baseline.

To export:

Launch the plugin within your shadcn/ui kit for Figma file.
Navigate to the Manage Variables tab.
Select the Export tab.
Pick the Style you want to export.
Choose your color format and display mode.
Click Generate CSS.
Copy the CSS, or use Copy CLI to copy the ready-made command.
After a successful export, the plugin also shows the matching base-style hint — run npx shadcn@latest init and pick the style with the same name (for example, the nova base style).
Open your shadcn/ui project, paste the CSS into globals.css, or run the copied CLI command in your terminal.

Back up your globals.css

Overwriting or replacing globals.css with the exported theme will replace your existing token values. Consider committing or backing up your current globals.css before pasting the new one.

Import variables

The Import tab goes the other way: paste a globals.css from your codebase and the plugin applies it to the kit. You choose where the theme lands:

Add as new style (default) — creates a brand-new style in the kit's Style collection, based on any of the eight built-ins (Nova by default). Name it for your brand (for example, Acme) and it lives alongside the built-in styles, so you can switch to it like any other style without touching Nova…Lyra.
Overwrite existing style — replaces the values of a style you pick (for example, Nova) with the pasted theme.

What gets applied: colors (light and dark), radius, and fonts. The kit's Light/Dark modes are left untouched — importing a theme never rewrites the light/dark switch itself.

Adding a style requires headroom in your Figma plan

"Add as new style" creates a new variable mode, and Figma limits modes per collection by plan. Because the Style collection already ships with 8 modes, adding one more may not be available on lower Figma plans — in that case use Overwrite existing style instead (you can duplicate the file first to keep a pristine copy).

To import:

Go to the Import tab.
Choose Add as new style (and its base style + a name) or Overwrite existing style (and which style).
Paste your globals.css.
Click Import Variables.

Your CSS should follow the standard shadcn/ui shape:

:root {
  --background: oklch(0.9816 0.0017 247.839);
  --foreground: oklch(0.1649 0.0352 281.8285);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1649 0.0352 281.8285);
  --popover: oklch(1 0 0);
  --popover-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);
  --destructive: oklch(0.6535 0.2348 34.037);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9205 0.0086 225.0878);
  --input: oklch(0.9205 0.0086 225.0878);
  --ring: oklch(0.6726 0.2904 341.4084);
  --chart-1: oklch(0.6726 0.2904 341.4084);
  --chart-2: oklch(0.5488 0.2944 299.0954);
  --chart-3: oklch(0.8442 0.1457 209.2851);
  --chart-4: oklch(0.8903 0.1739 171.269);
  --chart-5: oklch(0.9168 0.1915 101.407);
  --sidebar: oklch(0.9595 0.02 286.0164);
  --sidebar-foreground: oklch(0.1649 0.0352 281.8285);
  --sidebar-primary: oklch(0.6726 0.2904 341.4084);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.8903 0.1739 171.269);
  --sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285);
  --sidebar-border: oklch(0.9205 0.0086 225.0878);
  --sidebar-ring: oklch(0.6726 0.2904 341.4084);
  --font-sans: Outfit, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Fira Code, monospace;
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0.1649 0.0352 281.8285);
  --foreground: oklch(0.9513 0.0074 260.7315);
  --card: oklch(0.2542 0.0611 281.1423);
  --card-foreground: oklch(0.9513 0.0074 260.7315);
  --popover: oklch(0.2542 0.0611 281.1423);
  --popover-foreground: oklch(0.9513 0.0074 260.7315);
  --primary: oklch(0.6726 0.2904 341.4084);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.2542 0.0611 281.1423);
  --secondary-foreground: oklch(0.9513 0.0074 260.7315);
  --muted: oklch(0.2542 0.0611 281.1423);
  --muted-foreground: oklch(0.6245 0.05 278.1046);
  --accent: oklch(0.8903 0.1739 171.269);
  --accent-foreground: oklch(0.1649 0.0352 281.8285);
  --destructive: oklch(0.6535 0.2348 34.037);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3279 0.0832 280.789);
  --input: oklch(0.3279 0.0832 280.789);
  --ring: oklch(0.6726 0.2904 341.4084);
  --chart-1: oklch(0.6726 0.2904 341.4084);
  --chart-2: oklch(0.5488 0.2944 299.0954);
  --chart-3: oklch(0.8442 0.1457 209.2851);
  --chart-4: oklch(0.8903 0.1739 171.269);
  --chart-5: oklch(0.9168 0.1915 101.407);
  --sidebar: oklch(0.1649 0.0352 281.8285);
  --sidebar-foreground: oklch(0.9513 0.0074 260.7315);
  --sidebar-primary: oklch(0.6726 0.2904 341.4084);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.8903 0.1739 171.269);
  --sidebar-accent-foreground: oklch(0.1649 0.0352 281.8285);
  --sidebar-border: oklch(0.3279 0.0832 280.789);
  --sidebar-ring: oklch(0.6726 0.2904 341.4084);
}

A custom theme is just a new style

When you Add as new style, the plugin creates a new mode in the kit's Style collection based on the built-in you picked. That is exactly how the kit represents brand themes — your theme becomes a first-class style you can switch to. Learn more in the styles documentation and the theming guide.

Typeset export and import

Typeset has its own tab in the plugin, next to Manage Variables — see the dedicated Typeset export and import page.

Settings and kit detection

Open the plugin Settings tab to confirm what was detected. A line reads, for example, "Detected: 2026 kit v2.0 (8 styles)".

Detection is automatic, so you normally don't need to change anything. As an escape hatch — for instance, if a collection in your file was renamed — there is a single Kit structure override with these options:

Auto (detect) (default, recommended) — let the plugin decide.
July 2026 and newer — the current kit (8 styles in one file).
June 2026 and older — the earlier Tailwind v4 kit.
January 2025 and older — the Tailwind v3 era kits.

Leave it on Auto unless you have a specific reason to force a structure.

Older kit files

If you have an earlier kit open, the plugin shows the classic flow automatically — nothing about it changed.

Make sure the plugin's detection matches your file (Settings shows what it found).
On export, choose your theme and color mode, then Generate CSS and Copy CLI as before. There is no version dropdown anymore — the plugin picks the matching kit-release defaults automatically.
For files from January 2025 and earlier (Tailwind v3 era), the Tailwind v3 tabs appear automatically — no manual switch needed.
Import works the same as before: choose an existing theme to replace its values, or a new theme to add one to the Figma variables panel.

Migrating from an older kit?

The exported globals.css from any kit generation drops into a shadcn/ui project the same way. If you're moving to the latest kit, open the new file and use the flow above — your brand colors can come across via Import → Add as new style.

Create

The Create tab aligns your Figma kit with the presets from shadcn/ui create — style, base color, theme, chart colors, custom hex, icon library, font, heading font, radius, and menu accent. Create applies your theme choices across all eight styles at once, so your base color and typography stay consistent no matter which style is active. Each field shows its name inside the control (for example "Base Color: Neutral"); fields left on "No change" are not touched.

You can currently adjust:

Style (see below)
Base color
Theme
Chart colors
Custom hex color
Icon library
Heading font
Font
Radius
Menu accent

How to use the Create feature:

Open the plugin in your shadcn/ui Figma library file.
Go to the Manage Variables tab.
Switch to the Create tab.
Pick your desired theme options.
Click Create.

After a short moment, the plugin will update your Figma variables to match the selected settings.

Choosing a style in Create

Create includes a Style field (Nova, Vega, Mira, Luma, Sera, Maia, Rhea, or Lyra). Choosing one makes it the kit's default style — it becomes the first mode in the Style collection, so everything that follows the collection default renders in that style. You can still switch styles per page or frame at any time via the Style mode, as described in the styles docs. One thing to know: frames where you explicitly pinned a Style mode keep their pinned slot, so making a new style the default swaps what those pins point to.

Decode Preset

Paste a shadcn/ui preset code, for example --preset b6YWkyP8i, into the preset field and click Decode.

The plugin reads the preset and fills the Create settings automatically, including supported values like base color, theme, chart color, icon library, font, heading font, radius, and menu accent.

Decoded values are only applied to the form. To update your Figma variables, review the populated settings and click Create. The preset's style is decoded too and fills the Style field (on older kit files, which carry a single style, it is ignored).

Search documentation

Manage variables

Managing variables

Export variables

Import variables

Typeset export and import

Settings and kit detection

Older kit files

Create

How to use the Create feature:

Decode Preset

Manage variables

Managing variables

Export variables

Import variables

Typeset export and import

Settings and kit detection

Older kit files

Create

How to use the Create feature:

Decode Preset