# All 8 shadcn/ui styles, now in one Figma file

> The shadcn/ui kit for Figma (PRO) now ships every style in a single file. Switch one variable mode and the whole kit restyles, plus a new Typeset system and Figma plugin 2.0.

Published: 2026-07-24 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/shadcn-ui-kit-for-figma-all-8-styles-one-file

This is our biggest kit release yet. Every shadcn/ui style now lives in a single PRO Figma file, the variable system underneath it has been rebuilt around semantic tokens, we added a Typeset system for long-form content, and the Figma to shadcn/ui plugin steps up to version 2.0.

Here is everything that is new.

## 8 styles, one file

Until now, each style was its own Figma file. Now Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra all ship as modes inside one kit.

Switch the Style mode on a page or frame and the entire file restyles: control heights and paddings, radius ramps, text sizes, shadows, focus-ring widths, and border treatments all follow. Mira's 2px borders, Sera's underline-only inputs, Luma's softer radii — each style resolves through the same components, so you design once and preview any style instantly.

{/* TODO: screenshot — switching the Style mode restyling the whole file */}

You can set a default style for the whole kit, or switch per page and per frame while you explore. Learn how it works in the <Link href="/docs/styles">styles documentation</Link>.

## A rebuilt variable system

Under the hood, the kit now runs on one clean resolution chain. Every color resolves through semantic tokens that use the exact shadcn/ui CSS names you already know — `background`, `primary`, `chart-1`, the full `sidebar-*` set — with a per-component binding layer on top, so each component restyles correctly as you switch styles, and the active style supplies your light or dark palette underneath.

We also added a set of semantic tokens for the details that used to be hard to trace, like fields, controls, focus rings, and menu borders. Each one documents the exact shadcn/ui utility recipe it represents, so what you see in Figma maps cleanly to what a developer writes in code.

Controls now hug their content with a bound minimum height instead of a fixed height, which means switching styles can never leave a stale size behind. It is a smaller change than the styles headline, but it is the reason the whole file can restyle without breaking.

See the full breakdown in the <Link href="/docs/variables">variables documentation</Link>.

## Typeset for long-form content

New in this release is **Typeset**, the kit's system for prose and markdown — the paragraphs, headings, lists, quotes, and tables you'd write in an article, a docs page, or an AI-generated response. It mirrors shadcn's `typeset.css`, so your designed prose and your rendered content match.

Typeset ships as a dedicated page with ready-made markdown components and a Rich Text composite, plus four size modes (14, 15, 16, and 18px) that scale the whole prose system. Because it reuses the same theme tokens as the rest of the kit, prose follows light and dark and restyles with the active style automatically.

Read more in the <Link href="/docs/typeset">Typeset documentation</Link>.

## Figma plugin 2.0

The Figma to shadcn/ui plugin gets a major update alongside the kit:

- **It configures itself.** Open a file and the plugin reads it and sets up automatically — the old version dropdowns are gone.
- **Style picker on export.** Choose any style and export its `globals.css` in OKLCH, HSL, or RGB, including the semantic tokens and shadow values.
- **Add as a new style on import.** Bring a theme back into the kit as a brand-new style built on any of the eight, named however you like.
- **A Style field in Create.** Pick the style you want as the kit's default, and Decode Preset now fills it in from a shadcn/ui preset too.
- **A dedicated Typeset tab.** Export a `typeset.css` block from your chosen size mode and import one back — locally, with no AI credits used.

Managing variables between Figma and your codebase is covered in the <Link href="/docs/variables-management">manage variables documentation</Link>.

## Your existing kits keep working

If you are mid-project in an earlier kit file, nothing breaks. The same plugin recognizes older files and shows the matching flow automatically — no migration required.

Because Figma can't merge a component library across files, the one-file, 8-style model starts from the new kit. Open your current work where it lives, and start new projects from the new file when you're ready.

## 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](/help?inquiry=upgrade).

## Changelog

- Added 8 styles with the appropriate variables for each style. Components have been adapted to support these styles.
- Added new components:
  - Attachment
  - Bubble
  - Marker
  - Message
  - Message Scroller
  - Typeset
- Added new text style group: text sm / leading-relaxed
- Sonner renamed to Toast and refactored
- Table refactored
- Page Chart refactored
- Academy has been deleted
- Refactored Variables and Collections:
  - Added new variables to Mode / Custom
  - Added 8 variable modes
  - Added the Typeset collection
  - Refactored the Custom collection and Icon Library and moved them to the Style collection