Summary
Add React Aria as a component-library variant of AI Elements, parallel to the
Radix (radix-vega) and Base UI (base-vega) flavors — so AI Elements works for
projects on the shadcn React Aria distribution, not just Radix/Base UI.
Same request as #383 (Base UI), same shape as #450 (which adds the Base UI variant,
stacked on the radix-vega migration in #445). This asks for the third first-party
shadcn base to get equal treatment.
Motivation
shadcn now officially ships a React Aria base:
https://ui.shadcn.com/docs/changelog/2026-07-react-aria
Projects initialized with shadcn init --base aria install react-aria-components
based primitives. On such a project, bunx ai-elements@latest fails outright —
the CLI resolves AI Elements' shadcn deps against the active base and errors on the
first component that has no aria variant:
The item at https://ui.shadcn.com/r/styles/aria-vega/hover-card.json
was not found. It may not exist at the registry.
So today AI Elements is unusable on an aria-based project without hand-porting every
element. Base UI is getting fixed in #450; React Aria has the same need.
Proposed solution (mirroring #450)
packages/aria-ui — the shadcn aria-vega component set (react-aria-components),
parallel to packages/shadcn-ui (radix-vega) and packages/base-ui (base-vega).
packages/elements-aria + packages/examples-aria — elements/examples ported
onto React Aria, at parity with the other variants.
- Docs library switcher — extend
PreviewLibrarySwitch / useUILibrary to include a
React Aria option.
bump-ui — sync the aria registry too:
shadcn add --all --overwrite -c packages/aria-ui.
Porting notes / gotchas (from a real radix→aria migration of an AI Elements app)
These are the concrete divergences a React Aria port must handle — sharing so the
variant is correct, not just compiling:
-
No asChild. React Aria components don't support asChild. Every
<TooltipTrigger asChild>, <CollapsibleTrigger asChild>, <DialogTrigger asChild>,
<Button asChild><Link/></Button> must be recomposed (e.g. buttonVariants() on the
element directly, or render/Focusable patterns). This touches most elements
(actions, artifact, checkpoint, branch, audio-player, plan, web-preview, commit, etc.).
-
Different composition & prop names. Content components are renamed and triggers
wrap their content:
- Tooltip:
TooltipContent → Tooltip, no TooltipProvider; <TooltipTrigger>{btn}<Tooltip/></TooltipTrigger>.
- Dialog:
open→isOpen, DialogContent wrapper removed.
- Popover/DropdownMenu:
PopoverContent/DropdownMenuContent folded into
Popover/DropdownMenu; trigger wraps trigger+content; item onClick→onAction,
disabled→isDisabled.
- Collapsible:
open/onOpenChange → isExpanded/onExpandedChange.
- Tabs/Select:
value/onValueChange → selectedKey/onSelectionChange, item value→id.
- Button:
onClick→onPress, disabled→isDisabled.
-
useControllableState. Several elements import
@radix-ui/react-use-controllable-state (chain-of-thought, reasoning, stack-trace,
transcription, mic-selector, voice-selector). The aria variant needs a non-Radix
equivalent (trivial local hook).
-
Missing primitives. The shadcn aria-vega registry currently has no
hover-card and no menubar (both 404). AI Elements uses hover-card
(attachments, context, inline-citation). The aria variant needs either upstreamed
aria versions of these or documented replacements (e.g. hover-card→popover-on-hover,
menubar→dropdown-menu).
-
buttonVariants + RSC. The aria button is a client component; if
buttonVariants is used in a Server Component it must be exported from a non-client
module.
Acceptance criteria
bunx ai-elements@latest add <component> succeeds on a project with --base aria.
- All elements render at parity with the radix/base variants (a11y preserved).
- Docs switcher offers React Aria;
bump-ui keeps the aria registry in sync.
- The gotchas above are handled or documented.
Related
Summary
Add React Aria as a component-library variant of AI Elements, parallel to the
Radix (
radix-vega) and Base UI (base-vega) flavors — so AI Elements works forprojects on the shadcn React Aria distribution, not just Radix/Base UI.
Same request as #383 (Base UI), same shape as #450 (which adds the Base UI variant,
stacked on the
radix-vegamigration in #445). This asks for the third first-partyshadcn base to get equal treatment.
Motivation
shadcn now officially ships a React Aria base:
https://ui.shadcn.com/docs/changelog/2026-07-react-aria
Projects initialized with
shadcn init --base ariainstallreact-aria-componentsbased primitives. On such a project,
bunx ai-elements@latestfails outright —the CLI resolves AI Elements' shadcn deps against the active base and errors on the
first component that has no aria variant:
So today AI Elements is unusable on an aria-based project without hand-porting every
element. Base UI is getting fixed in #450; React Aria has the same need.
Proposed solution (mirroring #450)
packages/aria-ui— the shadcnaria-vegacomponent set (react-aria-components),parallel to
packages/shadcn-ui(radix-vega) andpackages/base-ui(base-vega).packages/elements-aria+packages/examples-aria— elements/examples portedonto React Aria, at parity with the other variants.
PreviewLibrarySwitch/useUILibraryto include aReact Aria option.
bump-ui— sync the aria registry too:shadcn add --all --overwrite -c packages/aria-ui.Porting notes / gotchas (from a real radix→aria migration of an AI Elements app)
These are the concrete divergences a React Aria port must handle — sharing so the
variant is correct, not just compiling:
No
asChild. React Aria components don't supportasChild. Every<TooltipTrigger asChild>,<CollapsibleTrigger asChild>,<DialogTrigger asChild>,<Button asChild><Link/></Button>must be recomposed (e.g.buttonVariants()on theelement directly, or
render/Focusablepatterns). This touches most elements(actions, artifact, checkpoint, branch, audio-player, plan, web-preview, commit, etc.).
Different composition & prop names. Content components are renamed and triggers
wrap their content:
TooltipContent→Tooltip, noTooltipProvider;<TooltipTrigger>{btn}<Tooltip/></TooltipTrigger>.open→isOpen,DialogContentwrapper removed.PopoverContent/DropdownMenuContentfolded intoPopover/DropdownMenu; trigger wraps trigger+content; itemonClick→onAction,disabled→isDisabled.open/onOpenChange→isExpanded/onExpandedChange.value/onValueChange→selectedKey/onSelectionChange, itemvalue→id.onClick→onPress,disabled→isDisabled.useControllableState. Several elements import@radix-ui/react-use-controllable-state(chain-of-thought, reasoning, stack-trace,transcription, mic-selector, voice-selector). The aria variant needs a non-Radix
equivalent (trivial local hook).
Missing primitives. The shadcn
aria-vegaregistry currently has nohover-cardand nomenubar(both 404). AI Elements uses hover-card(attachments, context, inline-citation). The aria variant needs either upstreamed
aria versions of these or documented replacements (e.g. hover-card→popover-on-hover,
menubar→dropdown-menu).
buttonVariants+ RSC. The ariabuttonis a client component; ifbuttonVariantsis used in a Server Component it must be exported from a non-clientmodule.
Acceptance criteria
bunx ai-elements@latest add <component>succeeds on a project with--base aria.bump-uikeeps the aria registry in sync.Related