Component Styles | Blocks | Docs

Shadcnblocks supports the same component styles available in the Shadcn UI Create page. These styles change the visual appearance of your shadcn/ui components. Each style applies different border radius, spacing, and visual treatments while maintaining full functionality.

Available Styles

Vega (New York)

The classic shadcn/ui look. Clean, neutral, and familiar.

Border radius: Medium (0.5rem)
Spacing: Balanced
Best for: Most projects, professional applications

This is the default style and matches the original shadcn/ui “New York” variant.

Nova

Reduced padding and margins for compact layouts.

Border radius: Small
Spacing: Tight
Best for: Data-heavy interfaces, dashboards

Maia

Soft and rounded, with generous spacing.

Border radius: Large (full rounded)
Spacing: Generous
Best for: Consumer apps, friendly interfaces

Lyra

Boxy and sharp. Pairs well with mono fonts.

Border radius: None (square corners)
Spacing: Balanced
Best for: Developer tools, technical interfaces

Mira

Compact. Made for dense interfaces.

Border radius: Small
Spacing: Minimal
Best for: Complex dashboards, data tables

Luma

Fluid, luminous, and soft. Pill-shaped controls and fully rounded cards.

Border radius: Full (pill)
Spacing: Generous
Best for: Consumer apps, marketing sites

Sera

Editorial and typographic. Square corners with roomy horizontal padding.

Border radius: None (square corners)
Spacing: Wide
Best for: Publications, portfolios, content-led sites

Rhea

Like Luma but compact. Rounded controls at a smaller scale.

Border radius: Large (capped)
Spacing: Compact
Best for: Product UI that wants Luma’s softness in less space

Previewing Styles

In the Explorer

The Explorer sidebar includes a Component Style selector. Select any style to instantly preview how blocks look with that style applied.

This is the best way to compare styles before committing to one for your project.

Style + UI Library

Styles work with Radix UI, Base UI and React Aria. The combination is specified in your components.json:

Configuration	Library	Style
`radix-vega`	Radix UI	Vega
`radix-nova`	Radix UI	Nova
`radix-maia`	Radix UI	Maia
`radix-lyra`	Radix UI	Lyra
`radix-mira`	Radix UI	Mira
`radix-luma`	Radix UI	Luma
`radix-sera`	Radix UI	Sera
`radix-rhea`	Radix UI	Rhea
`base-vega`	Base UI	Vega
`base-nova`	Base UI	Nova
`base-maia`	Base UI	Maia
`base-lyra`	Base UI	Lyra
`base-mira`	Base UI	Mira
`base-luma`	Base UI	Luma
`base-sera`	Base UI	Sera
`base-rhea`	Base UI	Rhea
`aria-vega`	React Aria	Vega
`aria-nova`	React Aria	Nova
`aria-maia`	React Aria	Maia
`aria-lyra`	React Aria	Lyra
`aria-mira`	React Aria	Mira
`aria-luma`	React Aria	Luma
`aria-sera`	React Aria	Sera
`aria-rhea`	React Aria	Rhea

Using Styles

1. Configure components.json

Set the style property to your preferred library-style combination:

{  "$schema": "https://ui.shadcn.com/schema.json",  "style": "radix-maia",  "rsc": true,  "tsx": true,  "tailwind": {    "config": "",    "css": "app/globals.css",    "baseColor": "neutral",    "cssVariables": true  },  "aliases": {    "components": "@/components",    "utils": "@/lib/utils",    "ui": "@/components/ui"  }}

2. Install Components

When you run the shadcn CLI, it reads your style setting and installs components with the correct visual treatment:

npx shadcn@latest add button card dialog

3. Install Blocks

Blocks from Shadcnblocks also respect your style setting:

npx shadcn@latest add @shadcnblocks/hero1

The block and all its component dependencies will use your configured style.

Previewing Libraries and Styles

On any block page, the toolbar has a library menu where you can switch between Radix UI, Base UI and React Aria (beta), and a style selector for the visual style. The preview, the code and the style value shown in the install instructions update to match your selection, so you can copy the exact {library}-{style} value into your components.json.

The CLI command in the toolbar works with whatever style you have configured; there is nothing to download. Set the value once in components.json and every npx shadcn@latest add @shadcnblocks/... install follows it.

Changing Styles

To switch to a different style in an existing project:

1. Update components.json

Change the style value:

{  "style": "radix-lyra"}

2. Re-install Components

Overwrite your existing components with the new style:

npx shadcn@latest add --all --overwrite

Or selectively update specific components:

npx shadcn@latest add button card input --overwrite

3. Verify Your UI

Check your application to ensure everything looks correct. Some custom modifications may need adjustment for the new style’s spacing or border radius.

Style Comparison

Here’s a quick comparison of key visual properties:

Style	Border Radius	Padding	Shadow	Best For
Vega	Medium	Balanced	Subtle	General purpose
Nova	Small	Compact	Minimal	Dashboards
Maia	Large/Full	Generous	Soft	Consumer apps
Lyra	None	Balanced	Sharp	Dev tools
Mira	Small	Minimal	None	Dense UIs
Luma	Full	Generous	Soft	Consumer apps
Sera	None	Wide	None	Editorial
Rhea	Large	Compact	Soft	Compact product UI

Mixing Styles

We don’t recommend mixing styles within a single project. Each style is designed as a cohesive system, and mixing can result in:

Inconsistent visual rhythm
Mismatched spacing
Confusing user experience

If you need different treatments for different sections, consider using themes (color variations) instead of different styles.

Styles vs Themes

Styles change the structural appearance:

Border radius
Padding and spacing
Shadow intensity
Component proportions

Themes change the colors:

Primary, secondary, accent colors
Background and foreground
Light and dark mode

You can combine any style with any theme. For example, use the Maia style (rounded, spacious) with a vibrant purple theme.

Learn more about themes in the Theming guide.

Next Steps

Base UI Support — Choose between Radix and Base UI
React Aria Support — Use React Aria Components instead
Explorer Guide — Master the Explorer’s features
Theming — Customize colors and themes