explaingit

adobe/react-spectrum

Analysis updated 2026-06-24

★ 15,082TypeScriptAudience · developerComplexity · 4/5Setup · moderate

TLDR

Adobe's React library family: React Spectrum (styled components matching Adobe's design system), React Aria (unstyled accessible behaviour), React Stately (state hooks), and i18n utilities.

Mindmap

mindmap
  root((React Spectrum))
    Packages
      React Spectrum styled
      React Aria unstyled
      React Stately hooks
      Internationalized
    Features
      WAI ARIA accessibility
      Mouse touch keyboard
      30+ languages and RTL
      Theming and dark mode
    Use cases
      Adobe styled product
      Custom design system
      Headless behaviour layer
    Tech stack
      React
      TypeScript
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Build an internal tool that matches Adobe's design language out of the box.

USE CASE 2

Add accessible buttons, menus, and date pickers to a custom design system using React Aria.

USE CASE 3

Use React Stately to manage selection or collection state in a React Native app.

USE CASE 4

Format dates, numbers, and currencies for 30+ locales with the Internationalized packages.

What is it built with?

TypeScriptReactReact Native

How does it compare?

adobe/react-spectrumkoenkk/zigbee2mqttjupyterlab/jupyterlab
Stars15,08215,12615,142
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderateeasy
Complexity4/53/53/5
Audiencedeveloperops devopsdata

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Pick the right package for the goal: React Spectrum if you want Adobe styling, React Aria if you want behaviour only, React Stately for state hooks alone.

License is not stated in the explanation.

In plain English

React Spectrum is a set of libraries from Adobe for building user interfaces in React. React is the popular JavaScript library used for building interactive web pages, and this repository provides ready-made building blocks (such as buttons, menus, dialogs, and form controls) plus tools to make those building blocks accessible, adaptive across devices, and translatable into other languages. The repository contains four related packages. React Spectrum itself is a React implementation of Adobe's in-house design system, called Spectrum, which gives a complete and styled component library that matches the look of Adobe's applications. React Aria is a lower-level package of unstyled components and hooks for teams who want to build their own design system but still get accessibility and interaction behaviour for free. React Stately is a set of hooks that handle state management for those components, useful on its own and even on platforms outside the web, such as React Native. The Internationalized packages are framework-agnostic libraries for handling language, date, and number formatting on the web. The README highlights four features. Accessibility follows the WAI-ARIA Authoring Practices, with testing across screen readers and devices and full keyboard navigation. Adaptive interactions mean the components handle mouse, touch, and keyboard input and follow responsive design principles. Internationalisation covers more than thirty languages out of the box, including right-to-left languages and locale-aware date and number formatting. Customisation includes theming and an automatic dark mode for React Spectrum, and the option to build your own components with your own markup and styles on top of React Aria and React Stately. Getting started depends on what you need. If you want a finished, styled component set tied to Adobe's design language, you use React Spectrum. If you want behaviour and accessibility without the visual styling, you use React Aria. If you only need state hooks, you use React Stately on its own. The README closes with a contributing section, pointing readers to a contributing guide and an architecture document that explains how the four libraries fit together. Contributions are explicitly invited.

Copy-paste prompts

Prompt 1
Replace my Radix UI dialog and combobox with React Aria equivalents, keeping my Tailwind styling.
Prompt 2
Set up React Spectrum in a Next.js 14 app router project with dark mode toggled by system preference.
Prompt 3
Build a custom accessible DatePicker component on top of React Aria and useDatePickerState, with my own styles.
Prompt 4
Migrate a select component using react-select to React Aria's useSelect, preserving keyboard behaviour and screen reader output.
Prompt 5
Use the Internationalized date library to render a locale-aware Gregorian and Hijri calendar side by side.

Frequently asked questions

What is react-spectrum?

Adobe's React library family: React Spectrum (styled components matching Adobe's design system), React Aria (unstyled accessible behaviour), React Stately (state hooks), and i18n utilities.

What language is react-spectrum written in?

Mainly TypeScript. The stack also includes TypeScript, React, React Native.

What license does react-spectrum use?

License is not stated in the explanation.

How hard is react-spectrum to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is react-spectrum for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

Alternatives & similar repos