The shadcn/ui kit for Figma comes pre-configured with a comprehensive set of variables for color modes, spacing, radius, and widths. These variables ensure consistency and flexibility in your designs.
The shadcn/ui for Figma comes pre-configured with a comprehensive set of variables for color modes, spacing, radius, and widths. These variables ensure consistency and flexibility in your designs.
The Basic version of the UI kit organizes variables into three distinct collections that control different aspects of your design system. The Pro version of the UI kit (with Pro Blocks) also contains the fourth collection dedicated for custom variables and Pro Blocks.
1. Tailwind CSS
The Tailwind CSS collection contains standard Tailwind CSS colors and utility classes.
Use Tailwind CSS variables to:
Reference Tailwind colors in the Theme collection
Apply Tailwind colors directly to components
Control component dimensions (height, width) and spacing
Define border properties (radius, width)
Set opacity values
Specify line-height for text styles
Variable Group
Usage
Example
spacing
Apply to padding, margins, and gaps in components and frames
When a component has spacing/4 applied in padding, developers should use the p-4 class in code
width
Control component and element widths
A frame with width/w-32 variable will translate to w-32 in code
min-width
Set minimum width constraints
Elements with min-width/min-w-3xs will use min-w-3xs in code
max-width
Set maximum width constraints
Elements with max-width/max-w-3xl will use max-w-3xl in code
height
Define component and element heights
A component with height/h-3 will use h-3 class in code
breakpoint
Define breakpoints
A frame with breakpoint/sm variable in max width defines the styling for elements with "sm:…" class
border-radius
Apply rounded corners to elements
A card with border-radius/rounded-lg will use rounded-lg class in code
border-width
Set border thickness
Elements with border-width/border-2 will use border-2 class in code
opacity
Control transparency
Elements with opacity/opacity-70 will use opacity-70 class in code
line-height
Set text line spacing
Text with line-height/leading-6 will use leading-6 class in code
tailwind colors
Apply standard Tailwind color palette
Elements using tailwind-colors/blue/500 will use text-blue-500 or bg-blue-500 in code
2. Theme
The Theme collection contains shadcn/ui color and radius variables, along with Tailwind CSS variables present in the theme.css file. This collection is where you should edit or add new variables to your library.
Use Theme variables for:
Creating new Typography styles
Defining Effect styles
Customizing your design system
Variable Group
Purpose
Usage
colors
The shadcn/ui color variables for your theme that are referenced in Mode collection.
The primary-light and primary-dark variable is referenced in Mode collection's primary variable.
font family
Specify typefaces
The font-sans is a main variable for font family
breakpoint
Define responsive breakpoints
Use breakpoint variables to define breakpoints in Tailwind CSS collection
container
Variables for container widths
Use container variables to define max-width and min-width in Tailwind CSS collection
text
Control text sizes
Use text variables for font size and line height in text styles
font weight
Set text thickness
Use font weight in text or text styles to define text weight
radius
Define corner roundness
Use radius variables to define border radius values in Tailwind CSS collection
shadow
Apply drop shadows
Used within shadow effect styles
inset-shadow
Apply inner shadows
Used within inset-shadow effect styles
drop-shadow
Apply filtered shadows
Used within drop-shadow effect styles
blur
Control blur effects
Used within blur effect styles
3. Mode
The Mode collection contains shadcn/ui color variables that switch between light and dark modes. These variables should be used directly within your UI designs and components.
Use alpha variables for fills and strokes that require transparency.
Variable Group
Usage
Example
base
shadcn/ui color variables
The frame with base/background variable will use bg-background class in code
alpha
Transparent color variants
The frame with alpha/90 and base/muted variables in fill values will use bg-muted/90 class in code
Color variable usage guide
Each color variable in the base group has a specific purpose in shadcn/ui:
Base
Variable
Purpose
background
Main application background
foreground
Primary text color on the background
card
Card component background
card-foreground
Text and icons within cards
popover
Background for dropdown menus and popovers
popover-foreground
Text and icons within popovers
primary
Brand color for primary actions (buttons, highlights)
primary-foreground
Text and icons on primary-colored elements
secondary
Less prominent action color
secondary-foreground
Text and icons on secondary-colored elements
muted
Subdued background for less important elements
muted-foreground
De-emphasized text (captions, labels)
accent
Highlight color for active or focused elements
accent-foreground
Text and icons on accent-colored elements
destructive
Error and deletion action color
destructive-foreground
Text and icons on destructive-colored elements
border
Default border color
input
Form inputs and button borders
ring
Focus indicator color
chart-1 through chart-5
Data visualization colors
sidebar
Sidebar background
sidebar-foreground
Text and icons within sidebar
sidebar-primary
Primary actions within sidebar
sidebar-primary-foreground
Text on sidebar primary elements
sidebar-accent
Highlighted elements within sidebar
sidebar-accent-foreground
Text on sidebar accent elements
sidebar-border
Sidebar divider lines or borders
sidebar-ring
Focus indicators within sidebar
Custom
Variable
Purpose
background dark:input\30
Used in UI elements that have background color variable in light mode and input/30 variable in dark mode
accent dark:input\50
Used in UI elements that have accent color variable in light mode and input/50 variable in dark mode
input dark:input\80
Used in UI elements that have input color variable in light mode and input/80 variable in dark mode
destructive dark:destructive\60
Used in UI elements that have destructive color variable in light mode and destructive/60 variable in dark mode
destructive dark:destructive\70
Used in UI elements that have destructive color variable in light mode and destructive/70 variable in dark mode
destructive dark:destructive\90
Used in UI elements that have destructive color variable in light mode and destructive/90 variable in dark mode
destructive\20 dark:destructive\40
Used in UI elements that have destructive/20 color variable in light mode and destructive/40 variable in dark mode
destructive\40 dark:destructive\60
Used in UI elements that have destructive/40 color variable in light mode and destructive/60 variable in dark mode
dark:input
Used when UI element uses the dark:input class
outline
Used in focus effect
outline\10 dark:outline\20
Used in UI elements that have outline/10 color variable in light mode and outline/20 variable in dark mode
4. Custom (available in Pro version)
Available in the Pro version of our UI kit, this collection offers essential variables for all Landing Page Pro Blocks. These variables enable effortless customization of heading styles, spacing, and layout parameters. The collection supports both Desktop and Mobile modes, allowing you to define distinct variables for different breakpoints. Additionally, you can use this collection as a foundation to create your own custom styles and variables.
Use Custom variables to:
Customize Heading Styles in Landing Page Pro Blocks
Adjust Spacing: in Landing Page Pro Blocks sections
Create Custom Styles: Use the collection as a foundation to develop your own unique styles and variables, enhancing the flexibility of your design.
Variable
Description
container-padding-x
X-axis padding for containers used in Landing Page Pro Blocks
section-padding-y
Y-axis padding for sections used in Landing Page Pro Blocks
section-title-gap-xl
Y-axis gap used for section title wrapper components with heading-xl
section-title-gap-lg
Y-axis gap used for section title wrapper components with heading-lg
section-title-gap-md
Y-axis gap used for section title wrapper components with heading-md
section-title-gap-sm
Y-axis gap used for section title wrapper components with heading-sm
heading-xl
A set of variables used in heading-xl style
heading-lg
A set of variables used in heading-lg style
heading-md
A set of variables used in heading-md style
heading-sm
A set of variables used in heading-sm style
Best practices
Maintain consistency by using variables rather than hard-coded values
Use Mode variables for any elements that should adapt to light/dark themes
Reference the appropriate variable collections based on your needs:
Tailwind CSS for utility-based styling
Theme for design system customization
Mode for theme-aware components and UI elements
By following these guidelines, your designs will seamlessly translate to code using the shadcn/ui framework and Tailwind CSS.
Limitations and differences compared to Tailwind css
While we've made every effort to translate the Tailwind CSS system into Figma variables, there are some inherent limitations in the current Figma implementation. Understanding these differences will help you work more effectively with our UI kit.
Math equations
Tailwind CSS: Uses a spacing variable as a base unit for calculations. For example, p-4 equals (--spacing) * 4 = 16px.
Figma: Math operations are not yet supported in Figma variables. As a result, all spacing and size values in our UI kit are implemented as fixed pixel values rather than calculated ones.
Color spaces
Tailwind CSS v4: Utilizes the OKLCH color space for improved color perception and manipulation.
Figma: OKLCH color space is not yet supported in Figma. Our UI kit uses hex values instead to maintain compatibility while still providing a comprehensive color system.
Typography variables
Tailwind CSS: Offers leading (line-height) and tracking (letter-spacing) variables with percentage and em-based values.
Figma: Percentage values are not currently supported in Figma variables. To work around this limitation, we've implemented a style-based approach for typography
Working with these limitations
Despite these constraints, our UI kit provides a robust design system that closely mirrors Tailwind CSS functionality. When designing:
Use the predefined spacing variables even though they're fixed values
Apply color variables consistently, knowing they'll translate correctly to code
Utilize text styles for typography needs rather than trying to recreate Tailwind's typography variables directly
These workarounds ensure your designs will translate smoothly to code, even with the current limitations of Figma variables.
.png)