Component Styles

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

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 both Radix UI and Base UI. 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
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

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.

Downloading Configuration

From the Explorer

1. Open any block in the Explorer
2. Select your preferred UI Library (Radix or Base)
3. Select your preferred Component Style
4. Click the components.json button in the toolbar

The downloaded file will be pre-configured with your selections.

From Block Pages

On individual block pages, click the shadcn icon in the toolbar to download a components.json. Note that style selection is only available in the Explorer.

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

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
• Explorer Guide — Master the Explorer’s features
• Theming — Customize colors and themes