shadcn/ui Theme Export
Variables Xporter is the first plugin to deeply integrate with shadcn/ui, capable of exporting Figma Variables as shadcn/ui theme configurations, allowing any shadcn/ui component to have different brand colors, density modes, light/dark themes, and more, help you create your design system.
Getting Started
1. Check Naming Convention
Your Figma Variables need to follow shadcn/ui naming conventions. Here are the complete shadcn/ui variable names and the corresponding variable names you should create in Figma:
- —radius -> radius/DEFAULT 1
- —background -> colors/background/DEFAULT
- —foreground -> colors/foreground/DEFAULT
- —card -> colors/card/DEFAULT
- —card-foreground -> colors/card/foreground
- —popover -> colors/popover/DEFAULT
- —popover-foreground -> colors/popover/foreground
- —primary -> colors/primary/DEFAULT
- —primary-foreground -> colors/primary/foreground
- —secondary -> colors/secondary/DEFAULT
- —secondary-foreground -> colors/secondary/foreground
- —muted -> colors/muted/DEFAULT
- —muted-foreground -> colors/muted/foreground
- —accent -> colors/accent/DEFAULT
- —accent-foreground -> colors/accent/foreground
- —destructive -> colors/destructive/DEFAULT
- —border -> colors/border/DEFAULT
- —input -> colors/input/DEFAULT
- —ring -> colors/ring/DEFAULT
- —chart-1 -> colors/chart-1/DEFAULT
- —chart-2 -> colors/chart-2/DEFAULT
- —chart-3 -> colors/chart-3/DEFAULT
- —chart-4 -> colors/chart-4/DEFAULT
- —chart-5 -> colors/chart-5/DEFAULT
- —sidebar -> colors/sidebar/DEFAULT
- —sidebar-foreground -> colors/sidebar/foreground
- —sidebar-primary -> colors/sidebar/primary
- —sidebar-primary-foreground -> colors/sidebar/primary-foreground
- —sidebar-accent -> colors/sidebar/accent
- —sidebar-accent-foreground -> colors/sidebar/accent-foreground
- —sidebar-border -> colors/sidebar/border
- —sidebar-ring -> colors/sidebar/ring
For non-shadcn/ui variables, Variables Xporter will export them as Tailwind CSS configuration.
Learn about Figma variable organization suggestions:
Figma Variable Organization Suggestions2. Select the Corresponding Format
In the export format, select shadcn/ui and your desired Tailwind CSS version.

Select shadcn/ui format
3. Export
Select the collections and variable groups you want to export, click the export button, and Variables Xporter will automatically export your Figma Variables as shadcn/ui theme configuration.

Export result
4. Use in shadcn/ui
Copy the exported configuration file to your shadcn/ui project’s Tailwind CSS configuration file and adjust according to your needs.
Examples
See the actual effects of shadcn/ui theme variables in action, including real-time preview switching for light/dark themes, density modes, brand colors, radius styles, and more.
View ExamplesFootnotes
-
The
DEFAULT
keyword is a way to organize variable hierarchies, learn more ↩