The shadcn/ui Figma kit reached version 3.0 on September 11, 2026, rewriting its entire color palette to match Tailwind CSS v4 and adopting Figma's new opacity alias feature released earlier this month. For teams that keep their Figma files in sync with their codebase, the update closes a long-standing gap: colors defined in v4's oklch space and colors stored in Figma now resolve to the same sRGB hex value.
The Tailwind v4 Color Rewrite
Tailwind CSS v4 shifted its color definitions from static hex values to oklch, which produces more perceptually uniform hues across the palette. The kit's previous version stored raw hex equivalents of Tailwind v3's colors, meaning designers working on a "slate-700" swatch in Figma were looking at a slightly different value than what bg-slate-700 rendered in the browser after a v4 upgrade.
Version 3.0 resolves this by converting all 286 colors/{family}/{step} entries to the sRGB hex equivalents of the v4 oklch definitions. The visual difference is subtle in most cases but measurable — particularly in cooler neutral families like slate and zinc, where oklch produces a slightly less blue-shifted result. The fix is most visible when you export a frame to an image and compare it against a rendered component at the same scale.
Opacity Aliases and the New Figma Feature
The more consequential change for day-to-day workflow is the introduction of opacity aliases. On September 3, Figma shipped a variables update that allows a color variable to carry an opacity alias — a separate number variable — instead of encoding the opacity directly into the stored hex. The shadcn/ui kit immediately adopted this in v3.0.
In practice, this means a token like custom/primary-muted now references the base primary color variable with a percentage rather than holding a precomputed tinted value. When a designer changes the primary color, every derived tint updates automatically across all eight themes without needing to hunt for hidden raw hex overrides. Before this change, keeping a custom brand color consistent meant manually updating both the base and each computed tint.
Plugin 3.0 and the Code Side
The companion Figma-to-shadcn/ui plugin reached version 3.0 alongside the kit. It now reads opacity alias structures natively and still exports to standard CSS custom properties, so existing codebases need no changes on the output side. The plugin detects kit v3.0 automatically while remaining backward compatible with earlier versions of the kit — useful for teams who update Figma files gradually across a large component library.
The Basic package received the same color model update, making the improvement available whether a team uses the full kit or the stripped-down variant.
For teams running Tailwind v4 in production and using shadcn/ui components, updating to kit v3.0 means the Figma canvas is finally an accurate preview of the rendered output — something that design systems have been trading workarounds for since Tailwind made its v4 color shift.