# Styles

> Learn how the 8 shadcn/ui styles - Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra - work in our Figma kit, how to switch between them in one file, and how they relate to themes and light/dark.

Canonical: https://www.shadcndesign.com/docs/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](https://ui.shadcn.com/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.

<Callout type="info">
You can also set the **default style from the plugin**: the [Figma to shadcn/ui plugin](/plugin)'s Create tab has a Style field — choosing one makes it the kit's default (first) Style mode, and decoding a shadcn/ui preset fills it automatically. Create's other fields apply your **theme** presets — colors, typography, icon library, radius — across all 8 styles at once, so whichever style is active already carries your settings.
</Callout>

## 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.

<RichImage src="/docs/Nova_1x.webp" alt="Shadcn Nova Style" />

### Nova

Equivalent to the [Nova preset in shadcn/create](https://ui.shadcn.com/create?preset=b2fA). {/* TODO: verify preset URL */}

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.

---

<RichImage src="/docs/Vega_1x.webp" alt="Shadcn Vega Style" />

### Vega

Equivalent to the [Vega preset in shadcn/create](https://ui.shadcn.com/create?preset=bIkeymG). {/* TODO: verify preset URL */}

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.

---

<RichImage src="/docs/Mira_1x.webp" alt="Shadcn Mira Style" />

### Mira

Equivalent to the [Mira preset in shadcn/create](https://ui.shadcn.com/create?preset=b1D0eCA4). {/* TODO: verify preset URL */}

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.

---

<RichImage src="/docs/Luma_1x.webp" alt="Shadcn Luma Style" />

### Luma

Equivalent to the [Luma preset in shadcn/create](https://ui.shadcn.com/create?preset=b1VlIttI). {/* TODO: verify preset URL */}

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

{/* TODO: re-shoot for 2026 kit — add Sera preview image */}

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](/preview) to compare it with the other styles.

{/* TODO: verify the /preview route exists (applies to the Sera/Maia/Rhea/Lyra links) */}

---

### Maia

{/* TODO: re-shoot for 2026 kit — add Maia preview image */}

Maia is round and approachable. Open the Maia preview from the [Preview page](/preview) to compare it with the other styles.

---

### Rhea

{/* TODO: re-shoot for 2026 kit — add Rhea preview image */}

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

---

### Lyra

{/* TODO: re-shoot for 2026 kit — add Lyra preview image */}

Lyra is square and minimal. Open the Lyra preview from the [Preview page](/preview) 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](/docs/theming).
- **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](https://ui.shadcn.com/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](/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. {/* TODO: verify per-package availability */}