# React Spectrum: Adobe's component libraries, and how to pick between React Spectrum, React Aria and React Stately

> The adobe/react-spectrum monorepo ships three layers of UI code: styled Spectrum components, unstyled accessible hooks, and cross-platform state management. The hard part is deciding which layer your project actually needs.

**adobe/react-spectrum** — A collection of libraries and tools that help you build adaptive, accessible, and reliable user experiences.

- Repository: https://github.com/adobe/react-spectrum
- Website: https://react-spectrum.adobe.com
- Stars: 15,891 · Forks: 1,577
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-08-08 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/adobe-react-spectrum

## The problem React Spectrum solves is not styling, it is behaviour

Every team that builds a combobox eventually rediscovers the same list of problems: focus trapping, arrow key navigation, typeahead, screen reader announcements, right-to-left text, and touch versus mouse handling. React Spectrum is Adobe's answer to that repetition. The README describes it as a collection of libraries and tools for building adaptive, accessible user experiences, and the features list is explicit about the intent: accessibility and behaviour implemented according to the WAI-ARIA Authoring Practices, with keyboard and screen reader support, and components designed for mouse, touch and keyboard input.

The audience is narrower than the tagline suggests. Adobe states that React Spectrum is a React implementation of Spectrum, Adobe's design system, and suggests it when you are integrating with Adobe software or want a complete component library. React Aria is the other half of the pitch: unstyled components and hooks for teams building their own design system. If you already have a design language and only want the interaction logic, the README points you at React Aria and React Stately rather than at React Spectrum itself. That split is the single most important thing to understand before installing anything.

## Three layers, one repository: how React Spectrum, React Aria and React Stately divide the work

The repository is a Yarn workspace monorepo, and the workspaces list in package.json names the layers directly: packages/react-stately, packages/react-aria, packages/react-aria-components, packages/tailwindcss-react-aria-components, and the scoped packages under packages/@*/*, which is where @adobe/react-spectrum and @react-spectrum/s2 live. React Aria provides behaviour and accessibility on top of DOM elements you control. React Stately provides state management hooks that React Aria consumes, and the README notes it can be used independently, for example on React Native. React Spectrum sits on top of both and supplies Spectrum's visual design.

The layering has a practical consequence. Adopting React Spectrum means accepting Adobe's markup and styling, because the accessibility work is entangled with the component structure. Adopting React Aria means writing that structure yourself and keeping it correct. The repository also publishes react-aria-components, a component-oriented package rather than a hooks-only one, and React Spectrum S2 (@react-spectrum/s2), a newer package in the same monorepo. The architecture RFC linked from the README, rfcs/2019-v3-architecture.md, is the document that explains how the pieces fit together; the README itself only sketches the boundaries.

## Installing React Spectrum and rendering a first component

The README does not contain install commands. It links to per-library getting-started pages on react-spectrum.adobe.com, and the repository ships runnable starters under examples/ (next-app, remix, rsp-next-ts, s2-vite-project, s2-webpack-5-example and others) that show a working configuration. The packages themselves are published on npm, so installation follows the usual package manager route. Because the README gives no version pins, check the getting-started page for the library you chose rather than copying a version from here.

There is no component snippet in the README or the repository files to reproduce here, so the concrete starting point is the workspace itself. The monorepo declares its workspaces in the root package.json, and the getting-started pages linked from the README are where the first component example lives:

```json
{
  "name": "react-spectrum-monorepo",
  "version": "2.21.0-beta.0",
  "private": true,
  "workspaces": [
    "packages/react-stately",
    "packages/react-aria",
    "packages/react-aria-components",
    "packages/tailwindcss-react-aria-components"
  ]
}
```

If your app is server rendered, the examples directory is the place to look: examples/next-app and examples/rsp-next-ts exist precisely because React Spectrum needs specific handling in a Next.js build, and examples/next-app-csp covers a content security policy setup. Start from the example closest to your bundler instead of assembling the configuration from scratch.

## What React Aria costs you: you own the DOM and the CSS

The React Aria path is the one people underestimate. You get hooks and unstyled components, which means no stylesheet arrives with them and no markup is imposed. The trade-off is that every visual state you want, including focus rings, hover, pressed and disabled, is yours to define, and the accessibility guarantees depend on you attaching the props the hooks return to the right elements in the right order. The README frames this positively as customizability, and it is genuine, but it is also a maintenance commitment that React Spectrum users do not carry.

A second limitation is React version support. The root package.json contains separate scripts named install-16, install-17, install-18 and install-canary, each pinning a different React range and a matching @testing-library set. That is a strong signal that the project maintains compatibility across several React versions rather than targeting only the latest, and it also means the version you run is a configuration decision, not an accident. If your application is pinned to an older React, verify the matching script and the corresponding example before assuming the current release works unchanged.

## React Spectrum versus Material UI: design system first, or component count first

The comparison that comes up most often is React Spectrum against Material UI, and the difference is structural rather than cosmetic. Material UI is a general component library that you theme toward your own brand. React Spectrum is an implementation of one specific design system, Adobe's, and the README says so plainly: Spectrum provides adaptive, accessible and cohesive experiences for all Adobe applications. Choosing it means adopting Spectrum's visual language as your starting point, with theming available for customization rather than as the primary mode of use.

If your product already looks like Adobe software, or you want a cohesive system without designing one, that constraint is the feature. If your brand guidelines are fixed and detailed, the unstyled React Aria layer is the honest alternative inside the same project, and the repository even ships packages/tailwindcss-react-aria-components for teams styling with Tailwind. The decision is therefore not React Spectrum versus a competitor so much as which layer of this monorepo matches how much design authority you are willing to hand over.

## Licence, maintenance and the real upgrade surface

The repository is licensed Apache-2.0, with a NOTICE.txt at the top level, which is a permissive licence that generally permits commercial use and modification provided you keep the notices. That is not legal advice; read LICENSE and NOTICE.txt and let your own counsel decide what your distribution requires.

On maintenance, the last push to the default branch was on 2026-07-31, and the recent releases cluster around the same date: react-aria-components@1.20.0 and @react-spectrum/s2@1.6.0 both published on 2026-07-31. The monorepo is not archived. Upgrade cost is where this project differs from a single-package library. Because the layers version independently, react-aria-components, @react-spectrum/s2 and the @react-aria/* scoped packages each move on their own schedule, and a fix you need may land in one layer before the others. The Makefile's clean targets, including clean_dist, delete build output across packages/@adobe/react-spectrum, @react-spectrum/s2, react-aria, react-stately and react-aria-components together, which reflects how tightly the build is coupled even though the published versions are not.

## When React Spectrum is the wrong choice

React Spectrum is a poor fit when your bundle budget is tight and you only need one or two components. The styled library brings a design system with it, and pulling it in for a single date picker is a large dependency for a small requirement. React Aria exists for exactly that case, but it moves the work to you rather than removing it.

It is also the wrong tool when your designers have already specified a component library that is not Spectrum. The README's own guidance is to start with React Aria if you are building a component library from scratch with your own styling, and that advice is worth taking literally. A third case is non-React targets: React Stately is described as usable independently, including on React Native, but React Spectrum and React Aria are React web libraries, so a native application is outside their scope. Finally, if you need a component the project does not yet publish, the unstyled layer is where you would build it, and that is a different kind of project than consuming a component library.

## Conclusion

Adopt React Spectrum if you want a complete component library that already implements Adobe's design system and its accessibility behaviour; adopt React Aria and React Stately instead if you have your own styling and DOM structure to preserve. Do not adopt any of them expecting a small dependency: the monorepo is a layered system and the README tells you to choose a library by use case, not to mix all three blindly. Before committing, verify which React version your toolchain targets against the install-16, install-17 and install-18 scripts in package.json, and check the Next.js and Vite starters under examples/ for a configuration close to your own build.

## FAQ

### What is React Spectrum?

It is a collection of libraries and tools from Adobe for building adaptive, accessible user experiences in React. The monorepo contains React Spectrum, an implementation of Adobe's Spectrum design system, alongside React Aria for unstyled accessible components and hooks, and React Stately for cross-platform state management.

### Is React Spectrum open source and free to use?

The repository is published under the Apache-2.0 licence and includes a NOTICE.txt file at the top level. Apache-2.0 is a permissive licence, so the code can generally be used and modified commercially, but the licence text and notice requirements are what govern your distribution.

### What is the difference between React Spectrum and React Aria?

React Spectrum is a React implementation of Adobe's Spectrum design system and supplies the styling along with the behaviour. React Aria is a library of unstyled React components and hooks, so you keep your own DOM structure and styling while the accessibility and interaction logic comes from the library.

### What is Adobe Spectrum 2?

Spectrum 2 is Adobe's design system, and the monorepo publishes @react-spectrum/s2 as its React implementation. The recent releases list includes @react-spectrum/s2@1.6.0, and the repository ships S2 starters for Vite, Next.js, Rollup, esbuild, Parcel, webpack and rslib under examples/.

### What is Adobe React Spectrum?

It is the same project: Adobe's collection of React libraries, where React Spectrum is the styled implementation of the Spectrum design system and React Aria and React Stately supply the unstyled behaviour and state layers underneath it.

## Sources

- [Official documentation](https://react-spectrum.adobe.com)
- [Official README](https://github.com/adobe/react-spectrum#readme)
- [Project repository](https://github.com/adobe/react-spectrum)
- [Release notes](https://github.com/adobe/react-spectrum/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/adobe-react-spectrum