Theming lets you quickly customise the look and feel of your Figma library. Start with the minimal black-and-white base of shadcn/ui, then adapt it to match your brand or project with ease.

Simple theming

You can theme your library in seconds using the tweakcn Figma plugin.

1. Open your Shadcraft library. You might want to make a backup before you start.

2. Click actions at the bottom of the screen, or press ⌘+K

3. Click the Plugins & widgets tab

4. Search ‘tweakcn’ and open the plugin

5. Choose one of the existing nine themes to instantly theme your kit

6. After a few moments, your theme should apply and update all the variables in your library!

Custom theming

Loading a custom tweakcn theme is a breeze

1. Head to the tweakcn website and create your custom theme

2. Click ‘Share’ in the top right of screen – note you may have to create an account

3. Give your theme a name and save it

4. Copy the URL on the next step

5. Come back to your Figma library and open the tweakcn Figma plugin (see steps above for guidance)

6. Click the ‘Import’ button and paste in your URL

7. After a few moments, your theme should apply and update all the variables in your library!

Get a preview

Use the theme preview to get a handy snapshot of your theme across the entire library as you theme.

Adding or editing variables

Theming may not break if you add new variables, but if you rename existing ones, it may cause theming issues.

Make a backup

The plugin will override your local variables in your file as soon as you choose a theme, so make a backup :-)