Last updated:
Aug 19, 2025
Variables
Variable collections
Variables are grouped into four collections, each handling a specific part of your design system
1. Spacing
This collection houses primitive spacing variables used for auto layout
2. Primitives
This collection includes standard Tailwind utility-based values. It’s designed to match the utility-first approach used in shadcn/ui.
Use these variables to:
Set component dimensions (height, width) and spacing
Define borders, including radius and stroke width
Adjust opacity values
Set line-height for text styles
Group | Usage |
|---|---|
| Border radius values for rounded corners |
| Set border thickness |
| Control the height of components and individual elements |
| Set minimum and maximum width constraints for components or individual elements |
| Adjust element transparency |
| Control the width of components and individual elements |
3. Theme
Edit these variables to apply your brand styling. This is where the majority of the theming variables live for light and dark mode in Shadcraft. The Theme collection allows you to house multiple brands with unique styling from the one library.
Use these variables to define theme-specific:
Typography
Shadows
Radii
Group | Usage |
|---|---|
| Define the colour palette used for your theme |
| Misc things like icon border width |
| Control all the facets of typography including family, size and weight |
| Theme-specific radii – references Primitive collection |
| Define all the properties of the various shadows |
Colour variable usage guide
Colour | Usage |
|---|---|
| Define the colour palette used for your theme |
| For elements on top of primary |
| Your secondary brand colour |
| For elements on top of secondary |
| Highlight colour for active or focused elements |
| For elements on top of accent |
| Main application background colour |
| For elements on top of background |
| Background colour for cards |
| For elements on top of card |
| Background colour for things like select menus |
| For elements on top of popover |
| Subtle background for elements requiring less attention |
| For elements on top of muted |
| For errors and destructive actions like delete |
| For elements on top of destructive |
| Main border colour |
| Border colour for form input elements |
| Helps define the focus indicator |
| Applied to elements to lighten their background colour |
| Applied to elements to lighten their background colour |
| Applied to elements to lighten their background colour |
Mode
These are the colours you apply to elements in your library. They enable the use of light and dark modes. These reference variables in the Theme collection.
Group | Usage |
|---|---|
| The majority of colours for UI in Shadcraft. These reference colours in the theme collection. |
| Figma-specific colours used to achieve the shadcn/ui look. |
| Colours used for charts |
| Colours used for shadows |
| Colours specific for the sidebar component |
Best practices
Use variables instead of hard-coded values to maintain consistency across your designs.
Apply Mode variables to any elements that need to respond to light or dark themes.
Use the collections in different ways:
Alter the values of Theme for Theme-specific styles
Apply mode variables rather than editing their values
Following these practices ensures your Figma designs stay aligned with the shadcn/ui framework and are easily translatable to Tailwind CSS in code.
