Theming

Editing variables

You can quickly adjust the theme of the shadcn/ui components by editing variables from our Theme collection. This guide explains how to customize your design system effectively.

Important: Make sure you have your main library open. The main library is the shadcn/ui kit Figma file where all your components live.

Changing primary color

Method 1: Use Tailwind CSS color

To change the primary color of your components from Neutral to Blue:

1. Open the variables panel
2. Switch to Theme collection
3. Find the ⁠primary-light variable in the colors group
4. Click on the ⁠neutral/900 variable in the value field
5. Find and select the ⁠blue/600 variable
6. Find the ⁠primary-dark variable in the colors group
7. Click on the current variable in the value field
8. Find and select the ⁠blue/600 variable

After a moment, Figma will update the primary colors for all components to Blue.

Method 2: Use custom color

To change the primary color of your components from Neutral to a custom purple color (#7C3AED):

1. Open the variables panel
2. Switch to Theme collection
3. Find the ⁠primary-light variable in the colors group
4. Unlink the neutral/900 variable in the value field
5. Enter ⁠#7C3AED in the value field
6. Find the ⁠primary-dark variable in the colors group
7. Unlink the current variable in the value field
8. Enter ⁠#7C3AED in the value field

After a moment, Figma will update the primary colors for all components to purple.

Changing neutral colors

You can easily change the neutral colors (such as background, foreground, border, input, muted, etc.) of your components by switching from Neutral to other color families like Slate or Stone.

Simply select the appropriate variables in the Theme collection and replace the Neutral color references with your preferred Tailwind color space alternatives.

Using alpha variables

In Tailwind CSS, it's common practice to use colors with opacity for component states. For example, in Tailwind CSS, you can use the ⁠bg-blue-600/90 class to apply the blue-600 color with 90% opacity.

This approach makes development more efficient by eliminating the need to create new variables for each opacity level. In Figma, you can implement this method by adding alpha variables to your colors.

For example, to make your primary color use 90% opacity on hover:

1. In the Fill panel in Figma, add color primary variable
2. Add a second Fill value above
3. Switch to library in color picker
4. Search and apply the alpha/90 variable

When implementing this in code, developers would use: ⁠bg-primary/90

This approach creates consistency between your design system and the code implementation, making the handoff process smoother for both designers and developers.

Changing font family

To change the font family for the entire project:

1. Open the variables panel
2. Navigate to the Theme collection
3. Find the ⁠font-sans variable in font family
4. Change the value from the current font (e.g., Geist) to your preferred font (e.g., Roboto)

Make sure you enter the font family name correctly.

Changing border radius

The border radius of your components plays a crucial role in defining your UI's visual character. Whether you prefer subtle, barely-noticeable rounding or bold, friendly curves, shadcn/ui makes it easy to adjust these values system-wide.

To change the border radius for your components:

1. Open the variables panel
2. Navigate to the Theme collection
3. Find the radius variable group
4. Change the values in radius-sm, radius-md, radius-lg and radius-xl

Below you can see where these variables are used:

‍

Note: Modifying additional radius variables such as ⁠radius-xs or ⁠radius-2xl will cascade changes to the corresponding border-radius variables in the Tailwind CSS collection, ensuring consistency throughout your design system.

Creating new variables and styles

New variables

Our Figma kit supports custom variable creation, but before adding new variables, consider whether they're truly necessary. The existing shadcn/ui and Tailwind CSS systems cover most design needs, and introducing unnecessary variables may complicate your design system. Review the shadcn/ui variables section above to ensure your addition is warranted.

The following guide demonstrates how to add new variables that remain consistent with Tailwind CSS classes and the shadcn/ui variable system.

Adding a new color variable

1. Add both ⁠variable-name-light and ⁠variable-name-dark to the colors group in the Theme collection
2. Add ⁠variable-name to the Mode collection
3. Edit the scope to ensure proper application
4. Use your new ⁠variable-name in components as needed

Example: Warning variable

To create a warning color variable:

1. Add ⁠warning-light: #F59E0B and ⁠warning-dark: #F59E0B to the Theme collection
2. Add ⁠warning to the Mode collection, referencing the appropriate light/dark variables
3. Add warning-foreground-light: #451A03 and warning-foreground-dark: #451A03 to the Theme collection
4. Apply the warning variables to components that need to display cautionary states
5. Use our Figma to shadcn/ui plugin to add new variables to your CSS file

Creating new themes

Our system is designed for rapid theme creation, allowing you to quickly test different styling options or build multi-brand design systems.

To add a new theme:

1. Open the variables panel
2. Navigate to the Themes collection
3. Click "+" in the top right corner to add new mode
4. Rename your new mode (e.g., "Brand B" or "High Contrast")
5. Adjust the variables in your new mode to match your desired aesthetic

This approach allows you to maintain multiple complete themes within a single design system, making it easy to switch between different visual styles while preserving component structure.

Working with styles

Styles in Figma represent Typography and Effect classes from Tailwind CSS. These Figma styles utilize variables from our Theme collection, mirroring how Tailwind CSS classes reference variables from the theme configuration file.

Adding new styles

You can easily create new Typography or Effect styles using either variables or custom values. The example below demonstrates how to create a new typography style and how developers can translate it to code.

Creating a new typography style: heading-xl

1. Select the Text tool and create a text element with your desired properties
2. Apply the appropriate variables from the Theme collection:
   1. Font: ⁠font-sans
   2. Size: ⁠text/4xl
   3. Weight: ⁠font-weight/extrabold
   4. Line height: ⁠line-height/tight
3. Open the Styles panel and click the "+" button in the Text styles section
4. Name your style "heading-xl" and organize it in the appropriate folder
5. Click "Create style"

Developers can then implement this style in code using Tailwind CSS classes:

<h1 class="font-sans text-4xl font-extrabold leading-tight">Heading Example</h1>

‍

By following this approach, you maintain consistency between your design system and code implementation, ensuring a smooth handoff process.

Dark mode

One of the most powerful features of variables in the Shadcn UI Kit for Figma is the ability to add modes to your variable collections. This allows you to effortlessly switch designs between different contexts, such as light and dark modes, with just a single click.

How it works

The Shadcn UI Kit for Figma comes pre-configured with both light and dark mode variables in the “3. Theme” variables collection. This means you can instantly transform your entire design from a light theme to a dark theme (and vice versa) without manually adjusting individual elements.

How to use

1. Select any page or frame in your Figma design.
2. Look for the "Change variables mode" icon in the Layer panel.
3. Click on this icon to reveal a dropdown menu.
4. Choose "Color modes" from the options.
5. Select either “3. Mode” > "Light" or “3. Mode” > "Dark" to instantly apply the change.

Multi-brand design systems

Note: To add multiple modes in the variables panel, make sure you're on a Figma Professional or Enterprise plan, or move the file to an organization that has one of these plans enabled.

To create themes for different brands, you’ll need to:

1. Open the Local variables panel in Figma.
2. Select the “2. Theme” collection.
3. Add new mode by pressing the “+” icon in the variables table at the top, where the “Default” theme is.
4. Rename the new mode to “Brand A” for example.
5. Reference different variables from the TailwindCSS collection for the variables in your new mode.

How to use

1. Select any page or frame in your Figma design.
2. Look for the "Change variables mode" icon in the Layer panel.
3. Click on this icon to reveal a dropdown menu.
4. Choose "Theme" from the options.
5. Select “3. Theme” > "Brand A" to instantly apply the change.