feat: add React Aria variant (aria-vega)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 283
- Avg merge
- 32m
- Merged PRs (30d)
- 1
Description
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 shadcnaria-vegacomponent set (react-aria-components),
parallel topackages/shadcn-ui(radix-vega) andpackages/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/useUILibraryto 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 supportasChild. Every
<TooltipTrigger asChild>,<CollapsibleTrigger asChild>,<DialogTrigger asChild>,
<Button asChild><Link/></Button>must be recomposed (e.g.buttonVariants()on the
element directly, orrender/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:- Tooltip:
TooltipContent→Tooltip, noTooltipProvider;<TooltipTrigger>{btn}<Tooltip/></TooltipTrigger>. - Dialog:
open→isOpen,DialogContentwrapper removed. - Popover/DropdownMenu:
PopoverContent/DropdownMenuContentfolded into
Popover/DropdownMenu; trigger wraps trigger+content; itemonClick→onAction,
disabled→isDisabled. - Collapsible:
open/onOpenChange→isExpanded/onExpandedChange. - Tabs/Select:
value/onValueChange→selectedKey/onSelectionChange, itemvalue→id. - Button:
onClick→onPress,disabled→isDisabled.
- Tooltip:
-
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 no
hover-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; if
buttonVariantsis 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-uikeeps the aria registry in sync. - The gotchas above are handled or documented.
Related
- #383 — Base UI support request
- #450 — feat: add Base UI variant (the analogous implementation)
- #445 — radix-vega migration
- shadcn React Aria changelog: https://ui.shadcn.com/docs/changelog/2026-07-react-aria
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Compare the analogous implementation in #450 and the existing packages/shadcn-ui and packages/base-ui variants first. Map the React Aria work across packages/aria-ui, packages/elements-aria, packages/examples-aria, PreviewLibrarySwitch, useUILibrary, and bump-ui, then review the listed composition and missing-primitive gotchas. Done means the aria base supports all elements, the CLI installation succeeds, the docs switcher includes React Aria, and the registry stays synchronized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100