How to choose the right shadcn/ui style for your project

Choosing a shadcn/ui style is one of the first product decisions you make when starting a new interface. It affects how dense the UI feels, how much space components need, how soft the surfaces look, and how close your design system feels to the product you are building.

The shadcndesign Figma kit now supports all 8 shadcn/ui styles — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra — in a single file.

This guide will help you choose the right one before you start designing, theming, or generating code.

What a shadcn/ui style changes

In shadcn/create, a style changes the component foundation before you customize colors, typography, icons, or radius.

Styles affect details like:

• Component spacing
• Control sizing
• Radius and geometry
• Density
• Proportions
• Visual rhythm across forms, tables, cards, dialogs, and navigation

That means style is not the same thing as theme. A theme changes colors, typography, and token choices. A style changes the shape and density of the components those tokens sit on.

If you want to adjust colors after choosing a style, use the Theme Generator or read the themes documentation. If you want to understand how styles work in the Figma kit, start with the styles documentation.

Quick comparison

Use Nova when you want the default shadcn/ui direction, balanced density, and a familiar product UI foundation.

Use Vega when you want something polished and slightly more distinctive, without moving too far away from the shadcn/ui system.

Use Mira when you need a denser interface for dashboards, admin panels, internal tools, and data-heavy screens.

Use Luma when you want a softer, rounder, and more spacious interface for onboarding, marketing-led SaaS, and friendly product flows.

You can compare all supported styles visually on the Preview page.

The five signals to check before choosing a style

You do not need to judge styles by taste alone. Most product teams can make the decision by looking at five signals.

Density

How much information should fit on one screen?

If your product has tables, filters, sidebars, activity feeds, or dense settings pages, start with Nova or Mira. If the product needs more breathing room, Vega or Luma may feel better.

Geometry

Should the interface feel neutral, compact, soft, or friendly?

Nova stays balanced. Mira feels tighter. Luma is rounder and softer. Vega sits between utility and polish.

Readability

How long will people use the interface in one session?

For long work sessions, avoid picking a style only because it looks expressive in a screenshot. You need spacing, contrast, and component proportions that stay comfortable after an hour of use.

Product tone

Is the product a dashboard, developer tool, internal admin, onboarding flow, or marketing site?

A style should match the work people are doing. Dense workflows usually need quieter UI. Onboarding and marketing screens can afford more space and personality.

Figma and code alignment

If you choose a style in shadcn/create, use the matching Figma kit style when designing. This keeps your components, spacing, and proportions aligned before you start customizing tokens.

Nova: the safest default for most projects

Nova is the default shadcn/ui style in the shadcndesign Figma kit and the closest match to the official shadcn/ui component docs.

Pick Nova when you want:

• A balanced starting point
• Good density without feeling cramped
• A familiar product UI foundation
• Strong compatibility with most SaaS layouts
• A style that works across dashboards, settings, forms, and marketing pages

Nova is the best first choice when you are not sure yet. It gives you enough structure for product work without forcing the interface into a narrow visual direction.

It is also the style included in every package with the Figma kit. The Basic package includes Nova, while the Plus and Premium packages include the Pro kit with all 8 styles — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra — in one file. You can compare packages on the pricing page.

Vega: polished, modern, and still flexible

Vega is a good choice when you want a more distinctive interface while staying close to the shadcn/ui system.

Pick Vega when you want:

• A modern product look
• A little more visual character than Nova
• A style that still works for broad SaaS products
• A polished foundation for forms, cards, dialogs, and navigation

Vega works well for products where the UI should feel considered, but not decorative. It gives you a stronger product personality without making every screen feel like a landing page.

If Nova feels too neutral and Luma feels too soft, Vega is a practical middle option.

Mira: denser UI for dashboards and admin tools

Mira is smaller and denser than Nova. It is built for screens where the user needs to see more information at once.

Pick Mira when you are building:

• Dashboards
• Admin panels
• Analytics tools
• Internal operations software
• Data-heavy SaaS products
• Interfaces with many tables, filters, and controls

Mira is useful when every row, column, and sidebar item matters. It helps you fit more on the screen without manually compressing a roomier style later.

The tradeoff is that Mira can feel less relaxed than Nova or Luma. If your product is used by non-technical teams or has a lot of onboarding content, test one realistic screen before making it the default.

Luma: softer UI for friendly product flows

Luma is rounder and more spacious. It works best when the product experience should feel approachable, calm, and a little more premium.

Pick Luma when you are building:

• Onboarding flows
• Marketing-led SaaS products
• Customer portals
• Creator tools
• Product pages with embedded app UI
• Interfaces where friendliness is part of the brand

Luma gives components more breathing room. That can make forms feel less intimidating and setup flows easier to scan.

The tradeoff is density. If your product depends on large tables or compact admin screens, Nova or Mira will usually be easier to use as a baseline.

Sera, Maia, Rhea, and Lyra: the more distinctive options

The kit also includes four styles with a stronger point of view.

Sera is editorial. Square corners, underline-only inputs, and a strong typographic character make it read more like a publication than a typical app.

Maia is round and approachable. If Luma appeals to you but you want to compare a second friendly option, look at Maia.

Rhea is balanced and modern, with borderless-at-rest fields that keep forms quiet until you interact with them.

Lyra is square and minimal. It suits products that want a stricter, more geometric look.

Because all 8 styles live in one file, you can preview each of them on a real screen by switching the Style variable mode. The Preview page is the fastest way to compare them side by side.

Which style fits which product?

B2B analytics dashboard

Start with Mira if density is the main requirement. Start with Nova if you want a better balance between density and comfort.

Avoid making Luma your default unless the dashboard is light and the brand experience matters more than raw screen efficiency.

Internal admin for non-technical teams

Start with Nova. It is readable, familiar, and flexible enough for forms, tables, permissions, billing, and account settings.

Use Vega if the product needs a more polished visual tone without becoming too spacious.

SaaS onboarding and settings

Start with Luma when you want the flow to feel friendly and less technical.

Use Nova when onboarding needs to connect directly into a dense product interface. That keeps the experience consistent from first setup to daily use.

Developer tool or operations console

Start with Mira if density and fast scanning matter most.

Use Nova if the product needs to support both technical and non-technical users. It gives you a safer middle ground.

Marketing page with product UI previews

Start with Luma if the UI screenshots should feel soft and inviting.

Use Vega if you want a modern product look with more structure. Use Nova if the screenshots need to match the app exactly.

A simple decision framework

Start with Nova as the control style. Then move only when the product has a clear reason.

• Need more density? Move toward Mira.
• Need a more polished product feel? Try Vega.
• Need a softer, friendlier experience? Try Luma or Maia.
• Need a stronger visual point of view? Compare Sera, Rhea, and Lyra on a real screen.
• Need the closest match to the official shadcn/ui docs? Stay with Nova.

This keeps the decision tied to product requirements instead of personal taste.

How to use the same style in Figma and code

The cleanest workflow is to choose the style before you start building the design system.

1. Pick a style in shadcn/create.
2. Open the shadcndesign Figma kit and switch the Style variable mode to the matching style.
3. Customize colors, typography, icons, and radius with the Figma plugin.
4. Use Create mode and variable management to keep your Figma tokens aligned with your code setup.
5. Start designing with components that already match the style foundation you selected.

You can learn more about the plugin workflow in the variables management documentation.

Test one real screen before you commit

Before you lock a style across the whole product, build one realistic screen in Figma and code.

Good test screens include:

• A table or list view
• A form-heavy settings page
• A dashboard with cards and filters
• A dialog or sheet flow
• A page that mixes navigation, content, and actions

Then ask a few simple questions:

• Can users scan the screen quickly?
• Does the hierarchy feel obvious?
• Does the style still feel comfortable after repeated use?
• Are you adding custom spacing overrides everywhere?
• Does the Figma kit still match the code output?

If you are fighting the style on the first screen, pick a different baseline before the project grows.

Final recommendation

For most shadcn/ui projects, start with Nova.

Choose Mira when density matters more than softness. Choose Luma when the product needs to feel more spacious and approachable. Choose Vega when you want a polished SaaS foundation that still stays close to shadcn/ui.

The right style is the one that matches your users' tasks. Pick the foundation first, then customize the theme on top.

FAQ

Which shadcn/ui style is best for dashboards?

Mira is the best fit when you need maximum density for dashboards, tables, and admin screens. Nova is a better default if you want a balance between density and comfort.

Is Nova better than Vega?

Not universally. Nova is the safest default and closest to the official shadcn/ui docs. Vega has a more polished product feel while staying flexible for SaaS interfaces.

Which style feels most friendly for onboarding?

Luma is the strongest choice when you want onboarding, setup, or customer-facing flows to feel softer and more spacious.

Which package includes each style?

Nova is included in the Basic, Plus, and Premium packages. Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra are included in the Plus and Premium packages. See the pricing page for the current package breakdown.

Can I switch styles inside one Figma kit file?

Yes. All 8 styles ship in a single Figma file as modes in the Style variable collection. Switch the mode on a page or frame and the whole design restyles at once — no separate files to manage. Read the styles documentation for more details.