Theming

Colors

In the Shadcn UI Kit for Figma, you can easily customize the primary and neutral colors of components using either predefined TailwindCSS colors or your own custom color palettes.

To use TailwindCSS colors:

1. Open the Local variables panel in Figma.
2. Select the “2. Theme” collection.
3. Find the “colors/primary-light” variable and click on the color value.
4. Select a different color from the tailwind colors list in the Libraries tab.
5. Repeat the step for the “colors/primary-dark” variable.
6. That’s it! The UI kit will now update to a different primary color. Use the same process to change other color variable values as well.

To use your colors:

1. Open the Local variables panel in Figma.
2. Select the “1. TailwindCSS” collection.
3. Add your 11 color variables to the “custom colors” group (from 50 to 950). You can use https://uicolors.app/create to create a palette based on one hex value.
4. Select the “2. Theme” collection.
5. Find the “colors/primary-light” variable and click on the color value.
6. Select a different color from the custom colors group in the Libraries tab.
7. Repeat the step for the “colors/primary-dark” variable.
8. That’s it! The UI kit will now update to a different primary color. Use the same process to change other color variable values as well.

Typography

Theme font family

To edit the font family that is used throughout the entire project:

1. Open the Local variables panel in Figma.
2. Select the “2. Theme” collection.
3. Find the “typography/font family/font-sans” variable.
4. Rename the value to the desired font family you want to use. If you specify the name of the font, like Roboto, it will automatically change the fonts in the project. However, keep in mind that with a large library like the Shadcn UI Kit for Figma, it may take a little time.
5. That’s it! The UI kit will now update to a different font family for the project. It might take a while.

Headings font family

If you want to use different font family for the theme’s typography headings:

1. Open the Local variables panel in Figma.
2. Select the “2. Theme” collection.
3. Find the “typography/typography components/h1/font-family” variable.
4. Disconnect the connection to the font-sans variable.
5. Rename the value to the desired font family you want to use.
6. That’s it! The UI kit will now update to a different font family for the h1 components.
7. Repeat the process for all remaining headings.

Font size and line height

In the Variables panel in the “2. Theme” collection you can find typography/base sizes variables group. These variables are used in the components and you can edit them to update multiple components at once:

1. Open the Local variables panel in Figma.
2. Select the “2. Theme” collection.
3. Find the “base sizes/base” variable and click on it’s value.
4. Select a different size variable from the “1. TailwindCSS” collection in the Libraries tab.
5. That’s it! The UI kit will now update its base font size everywhere. Use the same process to change other typography variable values as well.

Border Radius

By modifying the variable values, you can edit border-radius values for multiple components simultaneously. Here's a breakdown of the border radius variables and their applications:

sm — Small Radius — Used for compact components such as checkboxes and menu items (e.g., command, select, context menu, dropdown menu, select menu, menubar, and menubar triggers).

md — Default Radius (Medium) — Applied to medium-sized components including buttons, calendars and their items, inputs (e.g., text input, input OTP, textarea, select, pagination items, tabs, aspect ratio, popover, sonner, toast, toggle, tooltip, and date picker). Also used for wrappers of other components like context menu, table, dropdown menu, hover card, menubar, navigation menu, and select menu.

lg — Large Radius — Utilized for wrappers of components such as alerts, cards, commands, dialogs, forms, and carousels.

xl — Extra Large Radius — Primarily used for skeletons, interpreted as a card component.

full — Full Radius — Reserved for components with a circular shape, including avatars, badges, arrow buttons, drawer buttons, switches, progress indicators, radio buttons, and sliders.

To edit the border radius variables:

1. Open the Local variables panel in Figma.
2. Select the “2. Theme” collection.
3. Find the “border radius/sm” variable.
4. Select different variable in the value field for example “1. TailwindCSS / radius / rounded-none”.
5. That’s it! The UI kit will now update all “border radius/sm” within the project. Repeat the process for the remaining border radius variables.

Size and Space

Shadcn UI Kit for Figma follows the shadcn/ui code components which use the tailwind css spacing and sizing classes. If you wish to edit the component sizing or spacing:

1. Open the component’s page, for example, Button.
2. Select the components you want to edit.
3. Open the Auto Layout panel.
4. Select different size/space variables in the main component group.

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.