Every Shadcnblocks block, component, example and page is now available for React Aria Components, alongside Radix UI and Base UI. Set an aria style in components.json and the shadcn CLI installs the React Aria build.
How to use
- Set the style in components.json to aria-vega (or any other aria style) and make sure your Shadcnblocks registry URL contains the style placeholder.
- Reinstall the shadcn/ui wrappers for React Aria with the CLI’s add command and the overwrite flag.
- Install blocks as usual.
{ "style": "aria-vega", "registries": { "@shadcnblocks": "https://www.shadcnblocks.com/r/{style}/{name}" }}Available styles: Vega, Nova, Maia, Lyra, Mira, Luma, Sera and Rhea.
Why beta?
shadcn’s React Aria preset does not ship a navigation menu, menubar or form wrapper, and some third-party components (Kibo UI) have no React Aria build. Rather than drop those blocks, we ship our own React Aria implementations as Shadcnblocks “ui-extras” (same export names as the Radix wrappers, styled per style, installed into your components folder automatically), plus React Aria builds of the Kibo UI components.
Those pieces work and are typechecked, but they are maintained by us rather than upstream and may still change. The React Aria path is newer than Radix and Base UI, so it carries a Beta label in the library switcher until the shims settle or shadcn ships official versions.
On the site
Pick React Aria in the block toolbar’s library switcher or the Customize sheet to preview any block with React Aria. The Code tab shows the React Aria source, and the Diff view shows exactly what changed against the Radix version (onPress, isDisabled, LinkButton, id instead of value, and so on).