Skip to content

feat: add React Aria variant (aria-vega) #451

Description

@sFritsch09

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions