React Spectrum — Adobe's Accessible Design System for React

Introduction

React Spectrum is Adobe's open-source design system built for React. It is split into three layers: React Spectrum (themed components), React Aria (accessibility hooks), and React Stately (state logic). You can use the full design system or pick only the hooks you need for custom components.

What React Spectrum Does

• Provides 40+ production-ready components following Adobe's Spectrum design
• Ships React Aria hooks for building accessible custom components without UI opinions
• Manages complex state patterns (selections, overlays, collections) via React Stately
• Handles internationalization with right-to-left layout, date/number formatting, and translations
• Supports adaptive rendering for desktop and mobile interaction modes

Architecture Overview

The system follows a three-layer architecture. React Stately manages component state through framework-agnostic hooks. React Aria layers accessibility (ARIA attributes, keyboard navigation, focus management) on top of that state. React Spectrum combines both layers with Adobe's visual design tokens to produce themed, ready-to-use components.

Self-Hosting & Configuration

• Install @adobe/react-spectrum for the full design system
• Or install @react-aria/hooks and @react-stately packages individually for headless usage
• Wrap your app in a Provider with a theme for color scheme and scale
• Use the colorScheme prop on Provider to toggle light and dark modes
• Configure locale via the Provider for automatic number and date formatting

Key Features

• Three independent layers usable together or separately
• WAI-ARIA compliant with keyboard, screen reader, and focus management built in
• Adaptive interactions that switch between mouse and touch behavior
• Server-side rendering support with no hydration mismatches
• International date and number formatting with 30+ locale bundles

Comparison with Similar Tools

• Radix Primitives — unstyled accessible primitives, no state management layer
• Headless UI — Tailwind-team maintained, smaller component set
• MUI — Material Design-oriented, includes visual styling by default
• Chakra UI — styled with style props, less granular accessibility control
• Ariakit — lightweight accessibility primitives, smaller scope

FAQ

Q: Can I use React Aria without the Spectrum theme? A: Yes. React Aria hooks provide accessibility behavior with zero styling. You supply all markup and CSS.

Q: Does it work with Next.js and SSR? A: Yes. React Spectrum supports server-side rendering and React Server Components with proper client boundaries.

Q: How does internationalization work? A: The Provider accepts a locale prop. Components automatically format dates, numbers, and handle RTL layout.

Q: Is React Spectrum free? A: Yes. All three layers are Apache-2.0 licensed.

Sources

• https://github.com/adobe/react-spectrum
• https://react-spectrum.adobe.com/react-spectrum/