Docs / Radix UI, Base UI and React Aria

Radix UI, Base UI and React Aria

How the @shadcnblocks registry decides whether to serve the Radix UI, Base UI or React Aria version of a block, and why your components.json style is the only thing that controls it.

Every block is published in a Radix UI version, a Base UI version and a React Aria version. Which one the CLI installs is decided by the style in your components.json — not by the block id, not by the preview toggle on this site, and not by anything you type into the install command.

For what Base UI is and how to set up a Base UI project, see Base UI. This page covers the registry mechanics; everything said about Base UI below applies to React Aria (aria-* styles) the same way. React Aria support is currently labelled beta: shadcn’s React Aria preset is missing a few wrappers (navigation-menu, menubar, form) and some third-party components have no React Aria build, so shadcnblocks ships its own implementations of those. Blocks work, but those pieces are newer than the Radix and Base UI paths and their APIs may still change. See React Aria.

The {style} placeholder

Point the @shadcnblocks registry at the {style} URL:

{  "style": "base-vega",  "registries": {    "@shadcnblocks": "https://www.shadcnblocks.com/r/{style}/{name}"  }}

When you run npx shadcn add @shadcnblocks/hero1, the CLI substitutes both placeholders and requests:

https://www.shadcnblocks.com/r/base-vega/hero1

The registry reads the first segment, base-vega, and serves the Base UI build of hero1. With "style": "radix-nova" the same command requests /r/radix-nova/hero1 and gets the Radix build. The block id is identical in both cases.

Your styleRequest the CLI makesVersion served
radix-vega, radix-nova, radix-maia, radix-lyra, radix-mira, radix-luma, radix-sera, radix-rhea/r/radix-*/hero1Radix UI
base-vega, base-nova, base-maia, base-lyra, base-mira, base-luma, base-sera, base-rhea/r/base-*/hero1Base UI
aria-vega, aria-nova, aria-maia, aria-lyra, aria-mira, aria-luma, aria-sera, aria-rhea/r/aria-*/hero1React Aria
new-york-v4, new-york, default (older projects)/r/new-york-v4/hero1Radix UI

Without {style}

The older registry URL, https://www.shadcnblocks.com/r/{name}, still works. It has no way to communicate your style, so it always serves the Radix UI version. If you are on a base-* style and blocks arrive with asChild instead of render, this is almost always why — add {style} to the URL.

Radix items served this way include a docs note that the CLI prints after install, pointing you at the {style} URL.

Every item, every library

Every block, component, example and page is served for Radix UI, Base UI and React Aria. Most blocks only use plain markup and Tailwind, so the same source works for all three. Where a block relies on a primitive API that differs (Radix asChild vs Base render, React Aria’s onAction and selection APIs, drawer or calendar props), we keep a library-specific version of that block and serve it in place of the Radix source. We typecheck every item against each library’s wrappers, so a base-* or aria-* install is never handed Radix-only code.

The Code tab on a block page shows a “Same as Radix” note when the selected library needs no changes, and offers a Diff view when it does.

Pages

A page item (@shadcnblocks/landing-page1) is a list of blocks. The CLI resolves each block through the same {style} URL, so a page install is Base UI (or React Aria) end to end.

Third-party components

Some blocks depend on components from other registries (Kibo UI, Magic UI, DiceUI, …). Where the upstream registry is namespaced and style-aware (DiceUI’s @diceui/…), the block depends on it directly and the CLI resolves the right build. Where the upstream is Radix-only and the component breaks under Base UI, the Base block depends on a Base UI-compatible copy hosted here (https://www.shadcnblocks.com/r/base/kibo-ui/…, /r/base/magicui/rainbow-button), so render and asChild keep working; components that work unchanged keep pointing at the upstream registry. React Aria blocks do the same with /r/aria/kibo-ui/…. You do not need to configure anything for this.

React Aria wrappers shadcn does not ship

shadcn’s React Aria preset has no navigation-menu, menubar or form. Blocks that need them depend on @shadcnblocks/ui-extras/navigation-menu, @shadcnblocks/ui-extras/menubar or @shadcnblocks/ui-extras/form — React Aria implementations with the same exports as the Radix wrappers, served per style at /r/aria-{style}/ui-extras/{name} and installed into your components/ui folder like any other wrapper. Radix and Base UI projects never receive them.

Things that do not change the version

  • The block id. @shadcnblocks/hero1 is the same id for Radix, Base UI and React Aria.
  • Prefixing the id with a library. npx shadcn add @shadcnblocks/base/hero1 in a radix-nova project still installs the Radix UI version; the base/ prefix is ignored and the CLI prints a note explaining that your style selected Radix. Base UI code would not compile against Radix wrappers, so the registry never mixes them.
  • The Radix / Base / React Aria toggle on shadcnblocks.com. The switch in the Customize panel and the Code tab only change what you preview and copy on the site. The CLI command shown on the page is the same either way.

Checking what you installed

Base UI blocks use render where Radix blocks use asChild; React Aria blocks use LinkButton and press events:

// Radix UI<Button asChild>  <a href="/about">About</a></Button>// Base UI<Button render={<a href="/about" />} nativeButton={false}>  About</Button>// React Aria<LinkButton href="/about">About</LinkButton>

On any block page, open Code, then use the Diff view to compare the Radix source with the Base UI or React Aria source side by side before installing.

Next Steps