Introducing Base UI Support & Component Styles

Today we’re releasing two major features that give you unprecedented control over how shadcn/ui components look and behave in your projects: Base UI support and component styles—the same styles available in the Shadcn UI Create page.

The Problem We’re Solving

When building with shadcn/ui, you’ve always had one choice for primitives: Radix UI. And while Radix is excellent, some teams prefer alternatives—whether for bundle size, API preferences, or ecosystem alignment.

Similarly, shadcn/ui components have a specific visual style. But what if you want sharper corners? More compact spacing? A softer, more rounded feel?

Until now, you’d have to manually modify every component. That’s tedious and error-prone.

Introducing Base UI Support

Base UI is a headless component library built by the ex-MUI team. It provides the same accessible, unstyled primitives as Radix UI, but with some key differences:

Smaller bundle sizes — Base UI is lightweight by design
Active development — Regular updates from a well-funded team

How It Works

In the Explorer, you’ll find a new UI Library selector in the sidebar. Switch between Radix UI and Base UI to see how blocks render with each library.

When you’re ready to install, the CLI reads your components.json and uses the correct primitives automatically:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-vega"
}

That’s it. Run npx shadcn add @shadcnblocks/hero1 and you’ll get Base UI primitives instead of Radix.

What About Existing Projects?

If you’re already using Radix UI, nothing changes. Radix remains the default, and all your existing configurations work exactly as before.

If you want to try Base UI in a new project, just set your style to base-* and you’re good to go.

When to Use Radix UI

Radix UI is still our preferred choice. It has everything you need and works fine. It’s more stable and battle-tested, with a comprehensive set of primitives and excellent accessibility features. Radix arguably offers a more modern primitive library going forward, and that’s the main reason to use it.

When to Use Base UI

Base UI is a great alternative if you want smaller bundle sizes or prefer a different API. It’s built by the ex-MUI team, but it’s nothing to do with MUI codebases—it’s a standalone headless component library. Consider Base UI if bundle size is a primary concern for your project.

Component Styles

We support the same component styles available in the Shadcn UI Create page. These visual styles change how components look:

Vega (New York)

The classic shadcn/ui appearance. Clean lines, medium border radius, balanced spacing. This is what you’re used to—and it’s still the default.

Nova

Compact and efficient. Nova reduces padding and margins throughout, making it ideal for data-heavy dashboards and admin interfaces where screen real estate is precious.

Maia

Soft and friendly. Maia uses larger border radii (often fully rounded) and generous spacing. Perfect for consumer-facing apps where you want a warm, approachable feel.

Lyra

Sharp and technical. Lyra removes border radius entirely, creating a boxy, precise aesthetic. Pairs beautifully with monospace fonts for developer tools and technical interfaces.

Mira

Ultra-compact. Mira is designed for dense interfaces—complex dashboards, data tables, and applications where you need to fit a lot of information on screen.

Previewing Styles

The Explorer sidebar now includes a Component Style selector. Click through the options to see any block rendered in each style—instantly, without refreshing.

This is the fastest way to find the right style for your project.

The Configuration Format

Your components.json now uses a combined format:

{library}-{style}

For example:

radix-vega — Radix UI with Vega style (the default)
base-maia — Base UI with Maia style
radix-lyra — Radix UI with Lyra style

All 10 combinations are supported:

Radix UI	Base UI
`radix-vega`	`base-vega`
`radix-nova`	`base-nova`
`radix-maia`	`base-maia`
`radix-lyra`	`base-lyra`
`radix-mira`	`base-mira`

Getting Started

New Projects

Open the Explorer
Select your preferred UI Library (Radix or Base)
Select your preferred Component Style
Click components.json in the toolbar to download
Add the file to your project root
Install blocks: npx shadcn add @shadcnblocks/hero1

Existing Projects

Update your components.json with the new style format

Re-install components to apply the new style:

npx shadcn add button card dialog --overwrite

Migrating Between Libraries

MOST of our blocks require no changes when switching between Radix UI and Base UI. The underlying primitives are swapped automatically based on your components.json configuration.

However, in a few cases where our blocks were using Radix imports directly (in some Gallery blocks, for example), we’ve had to refactor those. If you encounter any issues after switching libraries, you can simply re-install those specific block IDs with the CLI:

npx shadcn add @shadcnblocks/gallery1 --overwrite

This will fetch the updated version that works with your chosen library.

Try It Now

Head to the Explorer and try the new selectors. We think you’ll love the flexibility.

Links: