React Aria

Unstyled, accessible React hooks and components for building your own design system.

Library
npm
v3.53.1
15,978 stars
Apache License 2.0

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum. How we score it →
90 /100 Excellent
Development Activity 100
Maintenance 84
Community 76
Maturity 60
Momentum 40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation. How we score it →
91 /100 Excellent
Architecture 92
Code Quality 93
Innovation 90
Learning Curve 80

React Aria is Adobe’s library of unstyled React hooks and components that provide the behavior, accessibility, and interactions needed to build high-quality UI components — without imposing any rendering, DOM structure, or styling. Each hook returns prop objects you spread onto your own elements, so you keep full control of markup and CSS while React Aria handles WAI-ARIA semantics, keyboard navigation, focus management, touch and pointer interactions, and internationalization.

Used by teams building custom design systems, it covers dozens of patterns — buttons, menus, comboboxes, date pickers, tables, sliders, dialogs, and more — each tested across a wide range of screen readers, browsers, and devices. React Aria pairs with React Stately for state management and can be adopted incrementally, one component at a time.

What You Get

  • 50+ hooks and unstyled components covering common UI patterns (buttons, menus, comboboxes, date pickers, tables, sliders, dialogs, and more)
  • WAI-ARIA compliant accessibility with full screen reader and keyboard navigation support, tested across many devices and assistive technologies
  • Adaptive mouse, touch, pointer, and keyboard interaction handling, plus focus management and overlay positioning
  • Built-in internationalization for 30+ languages, right-to-left layouts, and localized date and number formatting
  • A companion react-aria-components package offering higher-level styled-agnostic components, plus test utilities for consumers

Common Use Cases

  • Building a custom design system or component library from scratch with your own styling but production-grade accessibility
  • Replacing inaccessible in-house widgets with battle-tested behavior without changing your visual design
  • Implementing complex interactive patterns like comboboxes, date pickers, and data tables that are hard to make accessible by hand

Under The Hood

Architecture

React Aria lives in the adobe/react-spectrum monorepo alongside React Stately (state) and React Spectrum (Adobe’s styled implementation). Its core is a set of ~55 scoped @react-aria/* behavior packages (button, combobox, datepicker, listbox, table, overlays, interactions, i18n, and more), aggregated into the react-aria umbrella package whose exports/index.ts re-exports each hook. The design pattern is prop-getter hooks: a hook such as useButton(props, ref) computes ARIA attributes, event handlers, and interaction state, returning a buttonProps object the caller spreads onto its own element. Behavior is layered on top of React Stately state hooks and @react-types shared TypeScript definitions, with @internationalized/* packages providing framework-agnostic date, number, and string localization.

Tech Stack

Written primarily in TypeScript (~52% of the repo) with React declared as a peer dependency. Runtime dependencies are deliberately small — @internationalized/date, @internationalized/number, clsx, aria-hidden, use-sync-external-store, and @swc/helpers. The monorepo builds with Parcel and is tested with Jest 30 and Testing Library, including server-side-rendering and Parcel integration test suites.

Code Quality

Quality is high and thoroughly validated. Test coverage is extensive — the react-aria-components package alone ships 78 test files, and a dedicated @react-aria/test-utils package exposes reusable interaction testers (menu, select, table, gridlist, etc.) so consumers can test their own components. TypeScript types are strict and shared through @react-types, naming is consistent, and every source file carries the Apache-2.0 header. SSR and Strict Mode are exercised in CI.

API Design The public API is highly ergonomic and consistent: hooks follow a uniform useX(props, ref) signature returning namespaced prop objects, and types follow predictable AriaXProps / XAria conventions. Documentation at react-spectrum.adobe.com is exceptional, with runnable examples for every hook. The trade-off is some boilerplate — you supply the ref and render the DOM yourself — which the newer react-aria-components package reduces by offering assembled components while preserving styling freedom.

Used by 140 apps in this directory

TypeScript
47%
AGPL 3.0

Grafana

Analytics · Monitoring

77,469

The open-source observability platform that unifies metrics, logs, and traces from any data source into dynamic, queryable dashboards.

View details
95
Repo Health
91
Technical
63
Dependency
Built with
TypeScript 47%
Go 47%
Updated 1 weeks ago
TypeScript
47%
AGPL 3.0

Grafana

Analytics · Monitoring

77,469

The open-source observability platform that unifies metrics, logs, and traces from any data source into dynamic, queryable dashboards.

View details
95
Repo Health
91
Technical
63
Dependency
Built with
TypeScript 47%
Go 47%
Updated 1 weeks ago
TypeScript
47%
AGPL 3.0

Grafana

Analytics · Monitoring

77,469

The open-source observability platform that unifies metrics, logs, and traces from any data source into dynamic, queryable dashboards.

View details
95
Repo Health
91
Technical
63
Dependency
Built with
TypeScript 47%
Go 47%
Updated 1 weeks ago
TypeScript
71%
Other

highlight.io

Analytics · Developer Tools · Monitoring

9,384

Open-source full-stack monitoring that unifies session replay, error tracking, logging, and distributed tracing so you can stop context-switching between tools.

View details
76
Repo Health
78
Technical
65
Dependency
Built with
TypeScript 71%
Go 16%
Updated 1 weeks ago
TypeScript
71%
Other

highlight.io

Analytics · Developer Tools · Monitoring

9,384

Open-source full-stack monitoring that unifies session replay, error tracking, logging, and distributed tracing so you can stop context-switching between tools.

View details
76
Repo Health
78
Technical
65
Dependency
Built with
TypeScript 71%
Go 16%
Updated 1 weeks ago
TypeScript
52%

Kener

Devops · Monitoring

5,216

Stunning, self-hosted status pages with real-time uptime monitoring, incident management, and multi-channel notifications in a single Docker container.

View details
87
Repo Health
76
Technical
66
Dependency
Built with
TypeScript 52%
Svelte 45%
Updated 1 weeks ago
TypeScript
99%
MIT

KeystoneJS

CMS · Developer Tools

9,980

The superpowered headless CMS for developers built with GraphQL and React

View details
92
Repo Health
81
Technical
64
Dependency
Built with
TypeScript 99%
Updated 1 weeks ago
TypeScript
99%
MIT

KeystoneJS

CMS · Developer Tools

9,980

The superpowered headless CMS for developers built with GraphQL and React

View details
92
Repo Health
81
Technical
64
Dependency
Built with
TypeScript 99%
Updated 1 weeks ago
TypeScript
99%
MIT

KeystoneJS

CMS · Developer Tools

9,980

The superpowered headless CMS for developers built with GraphQL and React

View details
92
Repo Health
81
Technical
64
Dependency
Built with
TypeScript 99%
Updated 1 weeks ago

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers