Variables

The shadcn/ui kit for Figma comes pre-configured with a comprehensive set of variables for colors, spacing, radius, typography, and widths. These variables ensure consistency and flexibility in your designs.

Our UI kit leverages Figma variables and styles to mirror the official shadcn/ui framework, which is based on Tailwind CSS v4.

One file, 8 styles

The kit ships all 8 shadcn/ui styles in a single file — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra. Switching the active style restyles the entire file: heights, paddings, radius ramps, text sizes, shadows, focus rings, and border treatments all update at once. Four variable collections make that possible: Tailwind, Style, Mode, and Typeset.

Variable collections

The Basic version of the UI kit organizes variables into four collections that control different aspects of your design system. The Pro version (with Pro Blocks) adds a pro-blocks/* variable group inside the Style collection.

How the collections resolve

Colors flow through the collections in a one-way chain — each layer only ever points at the next:

• Kit components bind component/* variables in the Style collection (component/input/bg, component/badge/text, …). This per-component layer is what lets one component diverge per style without touching any other.
• component/* values alias Mode tokens (background, primary, custom/field, …). The Mode collection is a pure switch: Light points at the Style collection's color/light/* definitions, Dark at color/dark/*. No color values live in Mode itself.
• The Style collection is the only place colors are defined. Each color/light/{token} + color/dark/{token} pair holds the value per style — usually an alias into the Tailwind palette, sometimes a raw value.

In your own designs, bind Mode tokens (including custom/*) — they carry the exact shadcn/ui CSS names, and the active Style mode plus the Light/Dark switch do the rest. In practice: bind a field surface to custom/field, and switching the frame's Style mode or Light/Dark mode recolors it correctly — no manual work.

1. Tailwind

The Tailwind collection contains standard Tailwind CSS colors and utility primitives. It has a single value mode and rarely needs editing directly — it's the palette everything else references.

Use Tailwind variables to:

• Reference Tailwind colors from the Style collection's color pairs
• Apply Tailwind colors directly to components
• Control component spacing, widths, radius, and border width
• Set opacity values

2. Style

The Style collection is the heart of the kit. It has eight modes — one per shadcn/ui style — and holds everything that differs between them. Switch the mode on a page or frame (or set the file default) to restyle everything bound to it.

This is also where you recolor a theme: edit the color/light/* and color/dark/* pairs. See the theming documentation for the full workflow.

Pro Blocks variables (Pro version)

The pro-blocks/* group inside the Style collection provides the layout and typography values used by the Landing Page Pro Blocks. Variables are split into pro-blocks/desktop/* and pro-blocks/mobile/* so you can define distinct values per breakpoint, and you can use them as a foundation for your own section styles.

3. Mode

The Mode collection holds the shadcn/ui semantic color tokens that switch between light and dark. Use these directly in your UI designs and components. They carry the exact CSS variable names from shadcn/ui, so the mapping to code is one-to-one. The collection holds no color values of its own — every token aliases its color/light/* or color/dark/* definition in the Style collection, making Mode a pure light/dark switch.

Use alpha variables for fills and strokes that need transparency.

Semantic color tokens

Each semantic token has a specific purpose in shadcn/ui:

Semantic custom tokens

shadcn/ui builds many states and surfaces out of utility combinations rather than single tokens — for example a disabled field is disabled:bg-input/50 dark:disabled:bg-input/80. The kit captures those combinations as semantic custom/* tokens so you can bind one variable and get the correct value in every style and both modes. The recipes below show the Nova defaults — where a style diverges (for example Sera's transparent fields), the per-style recipe is in the variable's description in Figma.

4. Typeset

The Typeset collection powers the prose/markdown system and has four size modes (14px, 15px, 16px, 18px). It's covered in full in the Typeset documentation.

Best practices

• Maintain consistency by using variables rather than hard-coded values.
• Use Mode tokens (including custom/*) for anything that should adapt to light/dark and to the active style.
• Recolor themes in the Style collection's color/light/* and color/dark/* pairs, not on individual components.
• Colors are defined once, in the Style collection's color pairs. Never enter raw color values in the Mode collection or in component/* variables — alias down the chain instead.
• When extending the kit, follow the chain: define the color in the Style collection (color/light/* + color/dark/*), expose it as a Mode token, and bind components to a component/* variable that aliases it.
• Reference the right collection for the job:
  • Tailwind for the raw palette and utility primitives
  • Style for per-style structure, fonts, radius, and the theme color source
  • Mode for theme-aware component colors
  • Typeset for prose and long-form text

By following these guidelines, your designs will translate cleanly to shadcn/ui 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 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: Uses the OKLCH color space for improved color perception and manipulation.

Figma: OKLCH is not yet supported in Figma. Our UI kit uses hex values instead to maintain compatibility while still providing a comprehensive color system. (When you export with our plugin you can still choose OKLCH, HSL, or RGB output — see the plugin documentation.)

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, so the kit pre-computes line-heights to pixels: each type step in the Style collection carries its default line-height (text/{step}/lh) plus lh-tight…lh-loose steps matching Tailwind's leading-* scale, already multiplied out per style. Text styles bind these pixel values. Letter-spacing (tracking) remains handled inside text styles.

Working with these limitations

Despite these constraints, our UI kit provides a robust design system that closely mirrors Tailwind CSS. When designing:

• Use the predefined spacing variables even though they're fixed values.
• Apply color variables consistently, knowing they'll translate correctly to code.
• Use text styles for typography rather than trying to recreate Tailwind's typography variables directly.

These workarounds ensure your designs translate smoothly to code, even with the current limitations of Figma variables.