Styles

The shadcn/ui kit for Figma ships all 8 official shadcn/ui styles in a single file: Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra. You switch between them by changing one variable mode — no separate files, no duplicated pages.

What are shadcn/ui styles?

In shadcn/create, styles are presets that change the visual character of shadcn/ui components before you customize colors, typography, icons, or radius.

A style affects component spacing, sizing, radius, density, and proportions. It gives you a stronger starting point for a specific product direction. For example, one style may feel compact and sharp for data-heavy products, while another feels more spacious and approachable for marketing pages or modern SaaS interfaces.

How styles work in the Figma kit

Every style lives in the same file as a mode in the Style variable collection. Switching that mode restyles the entire file at once:

• Per-style control heights and paddings
• Radius ramps — Sera and Lyra are square; Luma and Maia are round
• Text sizes and the type scale
• Shadows and focus-ring widths
• Border treatments — for example Mira's 2px borders, or Sera's underline-only inputs

Because components hug their content with bound minimum heights (rather than fixed heights), switching styles never leaves stale sizes behind. One file carries the whole system.

How to switch styles

You can apply a style at the page/frame level or set it as the file default.

For a page or frame:

1. Select the page or frame in the Layers panel.
2. Click the Change variables mode icon.
3. Choose the Style collection.
4. Pick the style you want — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, or Lyra.

Everything inside re-sizes, re-radiuses, and re-fonts to match, with no manual overrides.

As the file default: set the Style mode on your top-level pages so new frames inherit it. In practice you'll pick a style once at the start of a project, then customize colors, typography, icons, and radius on top of it.

The 8 styles

Each style matches the corresponding preset in shadcn/create. All 8 are included in the same file, so you can preview any of them by switching the Style mode.

Nova

Equivalent to the Nova preset in shadcn/create.

Nova is the default shadcn/ui style and the best starting point for most projects. Use it when you want the closest match to the official shadcn/ui component docs, a balanced density, and a familiar product UI foundation.

---

Vega

Equivalent to the Vega preset in shadcn/create.

Vega is a strong choice when you want a slightly more distinctive interface while staying close to the shadcn/ui system. Use it for products that need a polished, modern feel without becoming too decorative.

---

Mira

Equivalent to the Mira preset in shadcn/create.

Mira is denser and smaller than the default Nova style, with 2px borders. Use it for SaaS products, dashboards, admin panels, and data-heavy interfaces where you want more information visible on the screen.

---

Luma

Equivalent to the Luma preset in shadcn/create.

Luma is round and spacious. Use it when you want a softer, friendlier interface with more breathing room — especially for marketing pages, onboarding flows, and modern SaaS products.

---

Sera

Sera is a distinctive, editorial style with square corners, underline-only inputs, and a strong typographic character. Use it when you want a design that reads more like a publication than a typical app. Open the Sera preview from the Preview page to compare it with the other styles.

---

Maia

Maia is round and approachable. Open the Maia preview from the Preview page to compare it with the other styles.

---

Rhea

Rhea is a balanced, modern style with borderless-at-rest fields. Open the Rhea preview from the Preview page to compare it with the other styles.

---

Lyra

Lyra is square and minimal. Open the Lyra preview from the Preview page to compare it with the other styles.

---

Styles, themes, and light/dark

These three axes are independent, and understanding how they combine is the key to the kit:

• Style (Nova…Lyra) defines the structure — spacing, sizing, radius, density, borders, shadows, and the type scale. Set it via the Style collection mode.
• Theme defines the colors, fonts, and radius values. You customize a theme by editing the color/light/* and color/dark/* pairs in the Style collection. See the theming documentation.
• Light/dark is the Mode collection (Light or Dark). It picks the light or dark half of whatever theme is active.

Because color tokens resolve through the active style, a theme edit can be applied to a single style or across all 8. And because Typeset colors reuse the same theme tokens, prose content follows the active style and light/dark automatically.

How to get started with presets and styles

Code

1. Pick your style in shadcn/create. All 8 styles are supported.
2. Adjust your colors, typography, icon library, and radius.
3. Click Get code and install the generated setup in your project.

Figma

1. Open the Figma kit. You can set the style in the next step from the plugin, or set the Style mode by hand.
2. Open our Figma to shadcn/ui plugin and use the Create tab — decode your preset (it fills the Style field too) or pick your style, colors, typography, icon library, and radius by hand.
3. Start designing with a Figma kit and shadcn/ui project that share the same style foundation.

---

FAQ

Are styles the same as themes?

No. Styles define the component structure and visual density — spacing, sizing, proportions, radius, borders, and shadows. Themes define colors, typography, and radius values you customize on top of a style. See "Styles, themes, and light/dark" above.

Can I switch styles inside one Figma kit file?

Yes. All 8 styles are modes in the Style collection. Switch the mode on a page or frame — or make a style the kit default via the plugin's Create tab — and the whole design restyles.

Which styles are included?

All 8 — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra — ship in the single kit file.