React Aria

Shadcnblocks supports React Aria as a third primitive library next to Radix UI and Base UI. Pick an aria-* style in components.json and the CLI installs the React Aria version of every block that has one.

Beta. React Aria support is labelled beta on the site. shadcn’s React Aria preset does not ship navigation-menu, menubar or form, and some third-party components (Kibo UI) have no React Aria build, so shadcnblocks ships its own implementations of those. Blocks work, but those pieces are newer and less battle-tested than the Radix and Base UI paths, and their APIs may still change.

What is React Aria?

React Aria Components is Adobe’s library of unstyled, accessible components. Compared with Radix and Base UI it is opinionated about interaction: presses instead of clicks, collections with keys instead of value strings, and overlays whose trigger owns the open state. shadcn/ui ships a React Aria preset of its wrappers, and shadcnblocks ships a React Aria version of each block written against those wrappers.

How it works

The style in your components.json selects the library:

{  "$schema": "https://ui.shadcn.com/schema.json",  "style": "aria-vega",  "registries": {    "@shadcnblocks": "https://www.shadcnblocks.com/r/{style}/{name}"  }}

Style value	UI library	Visual style
`aria-vega`	React Aria	Vega (New York)
`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

With the {style} registry URL, npx shadcn@latest add @shadcnblocks/hero1 requests /r/aria-vega/hero1 and receives the React Aria build of the block. The block id is the same as for Radix and Base UI. See Primitive libraries for the routing rules and fallbacks.

Getting started

Set "style": "aria-vega" (or another aria-* style) in components.json and make sure the @shadcnblocks registry URL contains {style}.
Reinstall the shadcn/ui wrappers for React Aria: npx shadcn@latest add --all --overwrite.
Install blocks as usual: npx shadcn@latest add @shadcnblocks/hero1.

The CLI installs the block, the React Aria wrappers it needs, react-aria-components, and any other npm dependencies.

Wrappers shadcn does not ship

shadcn’s React Aria preset has no navigation-menu, menubar or form. Blocks that use them depend on @shadcnblocks/ui-extras/navigation-menu, @shadcnblocks/ui-extras/menubar and @shadcnblocks/ui-extras/form: React Aria implementations with the same export names as the Radix wrappers, styled per visual style. The CLI installs them into components/ui automatically when a block needs them; you can also add them directly.

What changes in the code

The React Aria versions are real ports, not renamed props. The most common differences from the Radix source:

// Radix UI<Button asChild>  <a href="/about">About</a></Button><Tabs value={tab} onValueChange={setTab}>  <TabsTrigger value="a">A</TabsTrigger></Tabs><Tooltip>  <TooltipTrigger asChild><Button>Hi</Button></TooltipTrigger>  <TooltipContent side="right">Tip</TooltipContent></Tooltip>// React Aria<LinkButton href="/about">About</LinkButton><Tabs selectedKey={tab} onSelectionChange={(key) => setTab(String(key))}>  <TabsTrigger id="a">A</TabsTrigger></Tabs><TooltipTrigger>  <Button>Hi</Button>  <Tooltip placement="right">Tip</Tooltip></TooltipTrigger>

Other differences you will see: isDisabled / isSelected / isOpen instead of disabled / checked / open, onPress instead of onClick on buttons, id instead of value on collection items, data-selected / data-expanded instead of data-[state=…], and dates as @internationalized/date values in calendars and date pickers.

On any block page, open Code and switch the primitive library to React Aria in the Customize panel; the Diff view shows exactly what changed against the Radix source.

Coverage

Every block, component, example and page is available for React Aria. Most blocks are plain markup and Tailwind and use the same source as Radix; where a block depends on a primitive API that differs, we ship a React Aria-specific version of that block and typecheck it against the React Aria wrappers. Kibo UI components that break under React Aria are served as shadcnblocks-maintained React Aria builds from /r/aria/kibo-ui/{name}; other third-party components (and Kibo UI components that work unchanged) keep resolving to their upstream registry.

The Code tab on a block page shows a “Same as Radix” note when the React Aria code is identical, and offers a Diff view when it differs.