React Aria

React Aria is Adobe's accessibility-first foundation, extracted from the work behind React Spectrum. It has the deepest coverage of screen reader, keyboard and internationalisation behaviour available in the React ecosystem.

At a glance

Install	npm install react-aria-components
Two APIs	hooks (react-aria) or components (react-aria-components)
Styling	none, render props expose every state
i18n	RTL, locale-aware dates, non-Gregorian calendars
MCP server	yes, plus agent skills
License	Apache-2.0

Install

npm install react-aria-components

Use the lower-level hooks package instead when you need to own every element:

npm install react-aria react-stately

What the code looks like

States arrive as render props and as data attributes, so styling hover, focus-visible, pressed and disabled needs no extra state management.

import { Button, Dialog, DialogTrigger, Modal } from "react-aria-components"

<DialogTrigger>
  <Button className="btn">Open</Button>
  <Modal className="modal">
    <Dialog>
      {({ close }) => (
        <>
          <h2>Invite a teammate</h2>
          <Button onPress={close}>Cancel</Button>
        </>
      )}
    </Dialog>
  </Modal>
</DialogTrigger>

Why it wins on accessibility

Components are tested against real screen readers across desktop and mobile, which almost no other library does. Internationalisation is designed in rather than bolted on: right-to-left layouts, locale-aware number and date handling, and calendar systems beyond the Gregorian one.

Adobe also publishes a React Spectrum MCP server and agent skills, so an assistant can query the real component APIs instead of guessing.

Choose it if

• Accessibility is a contractual or regulatory requirement, not an aspiration.
• You ship in multiple locales, especially right-to-left ones.

Look elsewhere if

• Apache-2.0 is a problem for your legal review.
• You want a small API surface. This is the largest of the headless options and the ramp-up is real.