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, and let a single file carry all 8 shadcn/ui styles.
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.
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.
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.
| Collection | Modes | What it holds |
|---|---|---|
Tailwind | Value | Tailwind CSS v4 primitives: the color palette, spacing, radius, widths, opacity, line-height, and more. |
Style | Nova, Vega, Mira, Luma, Sera, Maia, Rhea, Lyra (8) | Everything that differs per style: the light/dark color source, fonts, radius ramp, type scale, shadows, per-component structure values, and icon-library switches. Change the mode to restyle the whole file. |
Mode | Light, Dark | The shadcn/ui semantic tokens with their exact CSS names, plus alpha helpers and the semantic custom/* tokens. Use these directly in your designs. |
Typeset | 14px, 15px, 16px, 18px | The prose/markdown system that mirrors shadcn's typeset.css. See the Typeset documentation. |
Colors flow through the collections in a one-way chain — each layer only ever points at the next:
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.color/light/{token} + color/dark/{token} pair (background, primary, border, chart-1, and so on) aliases a Tailwind palette variable per style. The custom/* and alpha/* groups under color/light|dark/* are aliases with opacity: each points at a base token (or, where none fits, at a Tailwind variable) and adds a percentage, so custom/primary-muted is literally primary at 5%. Only the shadow color variables (shadow/*, inset-shadow/*, drop-shadow/*) and six custom/* tokens with no matching base are stored as literal values.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.
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. Since kit 3.0 the palette matches Tailwind CSS v4: every colors/* step holds the sRGB hex equivalent of Tailwind v4's oklch definition (for example colors/red/500 is #fb2c36 and colors/neutral/400 is #a1a1a1). Earlier kits carried the Tailwind v3 hex palette.
Use Tailwind variables to:
| Variable Group | Usage | Example |
|---|---|---|
colors/{hue}/{shade} | The Tailwind CSS v4 color palette: 26 families × 11 steps (slate, gray, zinc, neutral, stone, taupe, mauve, olive, mist, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), plus black, white, and transparent | Elements using colors/blue/500 will use text-blue-500 or bg-blue-500 in code |
spacing/* | Apply to padding, margins, and gaps | A component with spacing/4 in padding maps to the p-4 class in code |
rounded/* | Apply rounded corners — each step aliases the active style's radius/* ramp in the Style collection | An element with rounded/lg maps to rounded-lg in code |
border-width/* | Set border thickness | An element with border-width/2 maps to border-2 in code |
min-width/* | Set minimum width constraints | An element with min-width/min-w-3xs maps to min-w-3xs in code |
max-width/* | Set maximum width constraints | An element with max-width/max-w-3xl maps to max-w-3xl in code |
opacity/* | Control transparency | An element with opacity/opacity-70 maps to opacity-70 in code |
stroke-width/* | Icon and vector stroke widths | Used inside icon components |
ring-width/* | Focus-ring widths | Referenced by the Style focus-ring values |
breakpoint/* | Define breakpoints | A frame with breakpoint/sm in max width defines styling for the sm:… prefix |
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.
| Variable Group | Purpose |
|---|---|
color/light/{token} + color/dark/{token} | The theme source. The base tokens (the shadcn semantic set) alias a Tailwind palette variable per style; the custom/* and alpha/* groups are aliases with opacity that point at those base tokens, so every tint follows when you re-point a base. Each pair feeds one Mode token; recolor your theme here rather than binding these to components directly. |
font/family/{sans,serif,mono,heading} | Typefaces for the whole file. Change once, applies everywhere. |
radius/{xs…4xl} | The per-style radius ramp (Sera and Lyra are square; Luma and Maia are round). Components reference it through the Tailwind collection's rounded/* aliases. |
text/* | The per-style type scale: size and default line-height per ramp step, plus computed lh-tight…lh-loose steps matching Tailwind's leading-* scale. |
font-weight/{thin…black} | The font-weight scale, referenced by text styles and per-component weight values. |
container/* + breakpoint/* | Container widths (3xs–7xl) and responsive breakpoints matching Tailwind's scale. |
shadow/*, inset-shadow/*, drop-shadow/*, blur/* | Effect primitives and per-component shadow slots, referenced by the kit's effect styles (along with focus-ring/width). Shadow colors are stored as literal black at an opacity, not as aliases. |
component/{name}/* | Structural values (heights, paddings, gaps, radii, border widths) and per-component color bindings that alias Mode tokens — the layer the kit's components are actually bound to. |
icon-library/{lucide,huge,phosphor,tabler,remix} | Boolean switches for the active icon set — set exactly one to true. See the icons documentation. |
pro-blocks/{desktop,mobile}/* | Layout values for the Landing Page Pro Blocks (Pro version only). |
meta/style-name | The name of the active style, for reference. |
meta/version | A hidden marker identifying the kit version (3.0 for the September 2026 kit). It powers the plugin's auto-detection and tells it which defaults to use. Never edit it. |
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.
| Variable | Description |
|---|---|
container-padding-x | X-axis padding for Pro Block containers (desktop and mobile) |
section-padding-y | Y-axis padding for Pro Block sections (desktop and mobile) |
section-title-gap-{sm,md,lg,xl} | Y-axis gap for section-title wrappers, one per heading size (desktop) |
heading-{sm,md,lg,xl}/* | Typography for the Pro Blocks heading styles: font-size, line-height, letter-spacing, and font-weight per heading size (desktop and mobile) |
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.
| Variable Group | Usage | Example |
|---|---|---|
| Semantic tokens | Flat shadcn/ui color variables | A frame with the background variable maps to bg-background in code |
alpha/* | Transparent overlay steps: alpha/5, 10, 20, 30, 40, 50, 60, 80, 90. In Figma each step is background at (100 - N)% opacity: alpha/90 is background at 10%, alpha/5 is background at 95% | A fill using muted plus alpha/90 maps to bg-muted/90 in code |
custom/* | Semantic helper tokens for states and surfaces shadcn builds with utility combinations (see below) | A field surface using custom/field maps to the recipe in its variable description |
Each semantic token has a specific purpose in shadcn/ui:
| 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 |
border | Default border color |
input | Form input and button borders |
ring | Focus indicator color |
ring-offset | Focus ring offset color (matches the surface the ring sits on) |
chart-1 through chart-5 | Data visualization colors |
sidebar | Sidebar background |
sidebar-foreground | Text and icons within the sidebar |
sidebar-primary | Primary actions within the sidebar |
sidebar-primary-foreground | Text on sidebar primary elements |
sidebar-accent | Highlighted elements within the sidebar |
sidebar-accent-foreground | Text on sidebar accent elements |
sidebar-border | Sidebar divider lines or borders |
sidebar-ring | Focus indicators within the sidebar |
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.
Since kit 3.0 these tokens are built with Figma's alias with opacity. In the Style collection, each color/light|dark/custom/* value points at a base token and adds a percentage instead of storing a flattened color: custom/primary-muted is literally primary at 5%, custom/focus-ring is ring at 50% (30% in some styles), custom/menu-border is foreground at 10%. Where no base token matches, the reference points at a Tailwind variable (dark custom/field is colors/white at 5%), and fully transparent values alias colors/transparent. The practical effect: re-point primary to another color and every primary tint (primary-muted, primary-hover, selected-wash, and the rest) follows in all 8 styles, with nothing to recompute.
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.
| Token | Purpose | Code recipe |
|---|---|---|
custom/field | Input, textarea, and select surface | dark:bg-input/30 |
custom/control | Outline button and bordered trigger surface | bg-background dark:bg-input/30 |
custom/control-hover | Outline button/trigger hover surface | hover:bg-muted dark:hover:bg-input/50 |
custom/field-border | Resting field border | border-input |
custom/field-disabled | Disabled field wash | disabled:bg-input/50 dark:disabled:bg-input/80 |
custom/switch-track | Switch unchecked track | data-unchecked:bg-input dark:data-unchecked:bg-input/80 |
custom/muted-hover | Ghost button hover | hover:bg-muted dark:hover:bg-muted/50 |
custom/muted-subtle | Subtle muted wash (card footer, table row hover) | bg-muted/50 |
custom/selected-wash | Selected/checked row background | has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 |
custom/primary-muted | Subtle primary tint (selected rows, kbd) | bg-primary/5 dark:bg-white/10 |
custom/primary-border | Checked-control border (switch, checkbox) | border-primary/30 dark:border-primary/20 |
custom/destructive-muted | Tinted destructive button/badge background | bg-destructive/10 dark:bg-destructive/20 |
custom/destructive-muted-hover | Hover for tinted destructive elements | hover:bg-destructive/20 dark:hover:bg-destructive/30 |
custom/destructive-muted-foreground | Secondary destructive text | text-destructive/90 |
custom/destructive-border | Invalid/destructive field border | aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 |
custom/destructive-ring | Invalid focus ring | aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 |
custom/focus-ring | Focus halo color (alpha varies per style) | ring-ring/50 |
custom/menu-border | Hairline border on menus, cards, popovers | ring-1 ring-foreground/10 |
custom/menu-glass | Frosted menu background | bg-popover/70 backdrop-blur-2xl |
custom/warning-foreground | Warning text (amber — no shadcn warning token exists) | Amber foreground |
custom/warning-background | Warning surface | Amber background |
custom/warning-border | Warning border | Amber border |
The kit ships 60 custom/* tokens in total. Beyond the ones listed above,
they cover component details — hovers (primary-hover, secondary-hover,
tinted-hover, bubble-outline-hover, bubble-ghost-hover,
badge-text-hover-muted), controls and menus (control-border,
control-strong, control-wash, menu-border-subtle, menu-border-faint,
menu-separator), rings (ring-faint, focus-ring-soft, ring-chart,
ring-chart-strong), washes and overlays (overlay, kbd-overlay,
foreground-wash, muted-foreground-wash, border-soft, tinted,
selected-wash), per-component tokens (accordion-active-bg,
active-tab-border, calendar-surface, calendar-accent, slider-thumb,
toggle-group-shadow, track-strong, drawer-border, and the switch
family), and extra destructive variants (destructive-strong,
destructive-wash, destructive-border-soft, destructive-border-strong).
Each carries its exact utility recipe in its Figma description, and each is an
alias with opacity on a base token, so it follows that base automatically. The
only exceptions are six literal values that have no matching base:
secondary-hover and tinted-hover in both modes, and tinted and
destructive-ring in dark mode.
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.
custom/*) for anything that should adapt to light/dark and to the active style.color/light/* and color/dark/* pairs, not on individual components.color/light/* and color/dark/* pairs alias Tailwind palette variables, Mode tokens alias the Style pairs, and component/* variables alias Mode tokens. If a color you need is missing from the palette, add it to the Tailwind collection first and alias it from there.primary, ring, background) and set the opacity percentage in the variable panel, the same way the kit's custom/* and alpha/* tokens are built. The tint then follows every recolor.color/light/* + color/dark/*, as aliases to Tailwind palette variables), expose it as a Mode token, and bind components to a component/* variable that aliases it.By following these guidelines, your designs will translate cleanly to shadcn/ui and 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.
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.
Tailwind CSS v4: Uses the OKLCH color space for improved color perception and manipulation.
Figma: OKLCH is not yet supported in Figma variables. The kit stores each palette step as the sRGB hex equivalent of Tailwind v4's oklch definition (since kit 3.0; earlier kits used the Tailwind v3 hex palette), so the colors match what Tailwind renders while staying compatible with Figma. When you export with our plugin you can still choose OKLCH, HSL, or RGB output — see the plugin documentation.
Tailwind CSS: Derives tints from a token with an opacity modifier, for example bg-primary/5 or ring-ring/50.
Figma: The kit expresses the same thing with Figma's alias with opacity: a variable that points at another color variable and adds a percentage. custom/* and alpha/* tokens, and the base tokens that carry transparency (dark border is colors/white at 10%), are built this way, so they follow their base automatically. On export, the plugin flattens each of them into a literal color (for example --primary-muted: oklch(0.205 0 0 / 0.05)), so the CSS output looks the same as before.
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.
Despite these constraints, our UI kit provides a robust design system that closely mirrors Tailwind CSS. When designing:
These workarounds ensure your designs translate smoothly to code, even with the current limitations of Figma variables.