The shadcn/ui kit for Figma: Update September 2026

Our new PRO Figma kit update is a release about the color system underneath the components. Nothing about the 8 styles or the component set changes in this update; what changes is how every color in the file is defined, and that makes theming the kit a lot less work. The Figma to shadcn/ui plugin moves to 3.0 at the same time.

Here is what is new.

The palette is now Tailwind CSS v4

The kit's Tailwind collection has carried the Tailwind v3 hex palette since the first release, even after shadcn/ui and Tailwind moved to v4 and its oklch-defined colors. Kit 3.0 closes that gap. All 286 colors/{family}/{step} values were rewritten to the sRGB hex equivalents of Tailwind v4's oklch definitions, across all 26 families (the Tailwind set plus taupe, mauve, olive, and mist).

Figma still has no oklch support, so the variables remain hex, but they are the v4 colors now. colors/red/500 is #fb2c36 instead of #ef4444, colors/neutral/400 is #a1a1a1 instead of #a3a3a3, and 185 of the 286 steps moved by at least a little. What you design in Figma now matches what Tailwind v4 renders in the browser.

The Theme Generator on this site uses the same v4 values, so a theme you build there and a theme you build in the kit start from the same palette.

Every theme color is an alias into the palette

In earlier kits, the color/light/* and color/dark/* pairs in the Style collection were a mix: some aliased a Tailwind variable, others held a raw hex. In 3.0 every base token in every style is an alias. The kit was also normalized onto one neutral family: background, foreground, card, muted, border, input, ring, and the sidebar-* tokens all point at colors/neutral/50 through colors/neutral/950 (plus colors/white and colors/black), destructive is red-600 in light and red-400 in dark, and the one deliberate exception, light muted-foreground, sits on zinc-500.

The practical benefit: changing the neutral family of a style is now a matter of re-pointing those pairs to another family, step for step, and the whole file follows. No hunting for the raw values that used to hide between the aliases.

Tints are built with alias with opacity

This is the change that removes the most manual work. Figma recently added alias with opacity: a color variable can point at another color variable and add a percentage. Kit 3.0 rebuilds all of the kit's tints on it.

Every custom/* token (59 per mode) and every alpha/* step (9 per mode) used to hold a flattened color computed from a base token. Now they reference the base token directly with a percentage:

• custom/primary-muted is primary at 5%
• custom/focus-ring is ring at 50% (30% in some styles)
• custom/menu-border is foreground at 10%
• alpha/90 is background at 10%, alpha/5 is background at 95%

Base tokens that carry transparency use the same mechanism: dark border is colors/white at 10%, dark input is colors/white at 15%, dark ring is colors/neutral/500 at 57%. Where no base token matches, the reference points at a Tailwind variable, and fully transparent values alias colors/transparent.

Re-point primary to another color and every primary tint, in all 8 styles, updates on its own. Before 3.0 each of those tints had to be recomputed by hand, or by the plugin, every time a base color changed. That step is gone.

Six custom tokens stay as literal values because nothing in the base set matches them (secondary-hover and tinted-hover in both modes, and tinted and destructive-ring in dark mode), and shadow colors stay literal black at an opacity on purpose. Everything else follows its base.

The variables documentation and the theming guide are updated for the new model.

Figma plugin 3.0

The Figma to shadcn/ui plugin reads the new alias-with-opacity values natively and still flattens them into literal colors in the exported globals.css (--primary-muted: oklch(0.205 0 0 / 0.05)), so the CSS you get is the same shape as before. Create and Import now leave the tints alone, since Figma keeps them in sync, and only recompute the few literal custom tokens. The Settings tab shows what it found, for example "Detected: kit v3.0 (8 styles)".

The plugin updates itself through the Figma Community, and 3.0 keeps supporting kit 2.x files, the 2026 kits before them, and the Tailwind v3 era kits.

See the plugin documentation and manage variables for the details.

The Basic kit gets the same treatment

The Basic package file (Nova only, September 2026) keeps its own five-collection layout, but its colors follow the same model now: the Tailwind palette carries the v4 values, the three translucent dark tokens in the Theme collection (border, input, sidebar-border) reference white with an opacity instead of storing one, and in the Mode collection every alpha/* step and every custom/* tint is an alias with opacity built from what its name says. custom/primary\40 is base/primary at 40%, custom/input\30 dark:input\30 is base/input at 30% in both modes, and so on. The plugin reads the Basic file exactly as before.

Your existing kits keep working

Kit 2.x files are unchanged and the plugin still recognizes them. If you are mid-project, stay where you are. Because Figma treats each file separately, the new color model starts from the 3.0 file; start new projects there when you are ready.

Updating a kit you already customized

If you want the new color model in a 2.x kit you have already themed, the shadcn-design-update agent skill can migrate the variables in place. Download your copy of the 3.0 kit from the Customer Portal, save a named version of your file, then run the skill from your code editor (Claude Code, Cursor, Codex, or OpenCode with the Figma MCP) or from the Figma agent:

/shadcn-design-update migrate variables to 3.0 [link-to-your-copy-of-the-3.0-kit]

The skill moves the Tailwind palette to the v4 values, re-points every base token that still matches the stock kit at the palette, and rebuilds the matching tints as aliases with opacity. Colors you changed, including a brand mode, stay as they are and show up in the report, so nothing you customized is overwritten. It can bring new components over in the same session. See the agent skills documentation and Updates.

Get the kit

Plus and Premium Package include the kit with all 8 styles: Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra.

Our Basic Package includes the Nova style as before. You can upgrade from Basic to Plus or Premium at any time here.

Changelog

• Kit meta/version is now 3.0 (September 2026).
• Tailwind collection: all 286 colors/{family}/{step} values rewritten to the sRGB hex equivalents of Tailwind CSS v4's oklch palette (185 values changed).
• Style collection: every color/light/* and color/dark/* base token (31 per mode) now aliases a Tailwind variable; no raw hex remains in the base set.
• Style collection: base tokens normalized onto the neutral family plus colors/white and colors/black; destructive on red-600 / red-400; dark sidebar-primary on blue-700; light muted-foreground kept on zinc-500.
• Style collection: custom/* (59 per mode) and alpha/* (9 per mode) rebuilt as aliases with opacity on their base tokens; six custom tokens remain literal; shadow colors remain literal.
• Base tokens with transparency (dark border, dark input, dark ring, sidebar-ring) rebuilt as aliases with opacity.
• Plugin 3.0.0: reads alias-with-opacity values, flattens them on export, leaves them alone on Create and Import, detects kit 3.0 (badge reads "Detected: kit v3.0 (8 styles)"), and falls back to the newest published defaults with a warning when a kit version has none of its own.
• Basic kit (September 2026): Tailwind v4 palette; Theme dark border, input, sidebar-border as white with opacity; Mode alpha/* and custom/* rebuilt as aliases with opacity from their names; outline renamed outline\50.
• Agent skill shadcn-design-update: new variables migration mode that converts a 2.x kit's color variables to the 3.0 model in place, keeping customized colors.