Instant Theming with shadcncraft

How you create and switch styles changed in v3 of the kit. Not sure which version you have? See how to tell which version you're using.

In v3, every shadcn style ships as a native set of Figma variables, real variables in the Style collection, not values painted on at runtime. The figma plugin is how you grow that system: create new styles, layer tweakcn themes over a style, import a theme from CSS, or export a theme back to a production-ready globals.css. For the broader picture of how this fits with code, see the shadcn/ui theming overview.

Everything the plugin creates lands as a new mode in the Style collection, so the rest of your file re-themes the moment you switch to it. Nothing detaches and no bindings break.

The plugin has three tabs and opens on Styles:

• Styles: create a brand-new shadcn style
• Themes: layer a tweakcn theme over a style, import from CSS, or export to CSS
• Code: generate component code, covered in React export

Create a style#

A style is a complete, named visual language: color palette, radii, typography and icon set, stored as one mode in the Style collection. The kit ships with all eight styles (Nova, Vega, Maia, Lyra, Mira, Luma, Sera and Rhea), so you can start theming straight away. You only create a style when you want another one to build on.

You can build a style by hand by editing the Figma variables directly (see Regular theming), but the plugin is the faster, easier route.

To create a style with the plugin:

1. Open your shadcncraft library file in Figma
2. Run the figma plugin
3. Stay on the Styles tab (it's selected by default)
4. Configure the style options below
5. Click Create style

The plugin writes a new mode into the Style collection, named after the style and its heading font (for example Nova - Geist). The new mode is seeded from the base style you picked, and applying it across a full v3 file takes a few seconds.

You can also click Shuffle for a random but coherent combination, or Reset to return every field to its defaults.

Style options#

Choosing a Style auto-fills every other field with that style's defaults. You can then adjust any of them.

Preset codes#

Every style configuration has a matching shadcn preset code, the short --preset b0… string shown beneath the options. Because it's the same code shadcn Create uses, the plugin works as a two-way bridge between the Figma UI kit and code.

From shadcn Create into Figma. Build a style on shadcn Create, copy its preset code, then in the plugin click Open and paste the code. The form fills in. Click Create style and that exact style is added as a new mode in the Style collection.

From Figma back out. Click the --preset code in the plugin to copy it, then paste it into shadcn Create, or into your project, to apply the same style to real code.

The Open field also accepts a full --preset b0… string.

Apply a tweakcn theme#

You can layer a tweakcn theme over any of your styles. The plugin re-colors a chosen base style and saves the result as its own new mode in the Style collection. The base style itself is left untouched.

Open the Themes tab, then the tweakcn sub-tab. Every tweakcn option starts the same way: pick a base style from the dropdown. It lists every style currently in your Style collection, and whichever you choose is the style the new theme is layered on top of.

tweakcn presets#

1. On the Themes tab, open the tweakcn sub-tab and select Presets
2. Choose a base style
3. Search the preset list and click a theme
4. The theme is applied immediately as a new mode

A custom tweakcn URL#

1. Open the tweakcn sub-tab and select Custom URL
2. Enter a Mode name for the new theme
3. Choose a base style
4. Paste a tweakcn theme URL
5. Click Apply

How to get a tweakcn theme URL#

1. Go to tweakcn.com
2. Create or edit a theme
3. Click Save in the top-right
4. Open your profile and copy the saved theme URL
5. Paste it into the plugin's Custom URL field``

This URL contains all color, radius, and token values.

Your saved tweakcn themes#

1. Open the tweakcn sub-tab and select Saved theme
2. Click Sign in to tweakcn. This opens tweakcn in your browser to authorize the connection
3. Once connected, your saved themes load inside the plugin
4. Choose a base style, then pick a theme to apply it

Import a theme from CSS#

If you already have a shadcn/ui globals.css, import it straight into a new style.

1. Open the Themes tab and select the globals.css sub-tab
2. Enter a Figma mode name for the new style
3. Paste your CSS, including variables like --primary and --background, following the shadcn/ui theming conventions
4. Click Apply

The CSS is parsed and mapped onto shadcncraft's variables, creating a new mode in the Style collection while your existing styles stay intact.

Export a theme to CSS#

Export the theme from any style in your file to a production-readyglobals.css`. The export reads from the Style collection, but its scope is the theme: the color, radius and typography tokens a shadcn/ui project consumes, the same scope you'd get from tweakcn.

1. Open the Themes tab and select Export
2. Set how the CSS is generated:`
   • Style: the style to export the theme from
   • Tailwind version: Tailwind v4 by default
   • Color output: the color format, for example oklch
3. Toggle the parts of the theme to include:
   • Light mode
   • Dark mode
   • Sidebar colors
   • Chart colors
   • Radius
   • Font family
4. Click Export CSS

The output is generated from the exact current variable values in Figma and is compatible with both shadcn/ui and Tailwind v4. Copy it directly or download it for use in your project.

Get a preview#

Use the theme preview to get a snapshot of any style across the entire library as you work.

Adding or editing variables#

Adding new variables won't break theming, but renaming existing ones can. The plugin matches variables by name, so a renamed variable is no longer recognized. If you're adjusting variables by hand, follow the guidance in Regular theming.