# @adobe/react-spectrum

> Spectrum UI components in React

Latest version **3.47.5** (published 2026-09-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @adobe/react-spectrum
pnpm add @adobe/react-spectrum
yarn add @adobe/react-spectrum
bun add @adobe/react-spectrum
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 3.47.5 |
| Published | 2026-09-04 |
| First published | 2020-07-07 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 12.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15856 |
| Maintainers | devongovett, aspro83 |

## Links

- npm: https://www.npmjs.com/package/@adobe/react-spectrum
- Repository: https://github.com/adobe/react-spectrum
- Homepage: https://github.com/adobe/react-spectrum#readme
- Issues: https://github.com/adobe/react-spectrum/issues
- npm.io page: https://npm.io/package/@adobe/react-spectrum

## Dependencies (12)

- [clsx](https://npm.io/package/clsx.md) ^2.0.0
- [react-aria](https://npm.io/package/react-aria.md) 3.52.1
- [client-only](https://npm.io/package/client-only.md) ^0.0.1
- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.0
- [react-stately](https://npm.io/package/react-stately.md) 3.50.0
- [@spectrum-icons/ui](https://npm.io/package/@spectrum-icons/ui.md) ^3.7.2
- [@react-types/shared](https://npm.io/package/@react-types/shared.md) ^3.36.1
- [react-aria-components](https://npm.io/package/react-aria-components.md) 1.21.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5
- [@internationalized/date](https://npm.io/package/@internationalized/date.md) ^3.12.4
- [use-sync-external-store](https://npm.io/package/use-sync-external-store.md) ^1.6.0
- [@spectrum-icons/workflow](https://npm.io/package/@spectrum-icons/workflow.md) ^4.3.2

## Recent versions

- 3.47.5 (latest) — 2026-09-04
- 3.0.0-nightly-90ff0c6d6-260918 (nightly) — 2026-09-18
- 3.0.0-nightly-be5bcc375-260917 — 2026-09-17
- 3.0.0-nightly-4693fcc84-260916 — 2026-09-16
- 3.0.0-nightly-4693fcc84-260915 — 2026-09-15
- 3.0.0-nightly-4693fcc84-260914 — 2026-09-14
- 3.0.0-nightly-4693fcc84-260913 — 2026-09-13
- 3.0.0-nightly-4693fcc84-260912 — 2026-09-12
- 3.0.0-nightly-4693fcc84-260911 — 2026-09-11
- 3.0.0-nightly-4693fcc84-260910 — 2026-09-10
- 3.0.0-nightly-d7e8e74e2-260909 — 2026-09-09
- 3.0.0-nightly-d7e8e74e2-260908 — 2026-09-08
- 3.47.4 — 2026-09-01
- 3.0.0-nightly-1062d083a-260814 — 2026-08-14
- 3.0.0-nightly-6748e03ce-260813 — 2026-08-13
- … 1335 more at https://npm.io/package/@adobe/react-spectrum/versions

## README

# [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html)

A React implementation of Spectrum, Adobe’s design system.

## Features

* ♿️ **Accessible** – React Spectrum components are designed with accessibility top-of-mind and include full screen reader and keyboard navigation support.
* 📱 **Adaptive** – React Spectrum components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a great experience, no matter the device.
* 🌍 **International** – React Spectrum components are designed to support over 30 languages, including support for right-to-left languages, date and number formatting, and more.
* 🎨 **Customizable theming** – React Spectrum supports custom themes to match your brand, including automatic support for dark mode.

## Getting started

The easiest way to start building a React Spectrum application is by following our [getting started](https://react-spectrum.adobe.com/react-spectrum/getting-started.html) guide. It walks through all of the steps needed to install the components from npm, set up build tooling, and create your first application.

### Example

Here is a very basic example of using React Spectrum.

```jsx
import {Provider, defaultTheme, Button} from '@adobe/react-spectrum';

// Render it in your app!
function App() {
  return (
    <Provider theme={theme}>
      <Button
        variant="cta"
        onPress={() => alert('Hey there!')}>
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}
```

## Learn more

React Spectrum is part of a family of libraries that help you build adaptive, accessible, and robust user experiences.
Learn more about [React Aria](https://react-spectrum.adobe.com/react-aria/index.html) and [React Stately](https://react-spectrum.adobe.com/react-stately/index.html) if you'd like to build your own component library from scratch on [our website](https://react-spectrum.adobe.com/index.html).

---
_Source: https://npm.io/package/@adobe/react-spectrum · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._