vercel / vercel/ai-elements

feat: add React Aria variant (aria-vega)

Open
#451 0 comments 0 reactions 0 assignees View on GitHub

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 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:

  1. 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.).

  2. Different composition & prop names. Content components are renamed and triggers
    wrap their content:

    • Tooltip: TooltipContentTooltip, no TooltipProvider; <TooltipTrigger>{btn}<Tooltip/></TooltipTrigger>.
    • Dialog: openisOpen, DialogContent wrapper removed.
    • Popover/DropdownMenu: PopoverContent/DropdownMenuContent folded into
      Popover/DropdownMenu; trigger wraps trigger+content; item onClickonAction,
      disabledisDisabled.
    • Collapsible: open/onOpenChangeisExpanded/onExpandedChange.
    • Tabs/Select: value/onValueChangeselectedKey/onSelectionChange, item valueid.
    • Button: onClickonPress, disabledisDisabled.
  3. 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).

  4. 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).

  5. 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.