# react-stately

> Spectrum UI components in React

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

## Install

```sh
npm install react-stately
pnpm add react-stately
yarn add react-stately
bun add react-stately
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.50.0 |
| Published | 2026-09-01 |
| First published | 2018-01-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 5.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15854 |
| Maintainers | devongovett, aspro83 |

## Links

- npm: https://www.npmjs.com/package/react-stately
- 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/react-stately

## Dependencies (6)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.0
- [@react-types/shared](https://npm.io/package/@react-types/shared.md) ^3.36.1
- [@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
- [@internationalized/number](https://npm.io/package/@internationalized/number.md) ^3.6.8
- [@internationalized/string](https://npm.io/package/@internationalized/string.md) ^3.2.10

## Recent versions

- 3.50.0 (latest) — 2026-09-01
- 3.0.0-nightly-16eead67e-260928 (nightly) — 2026-09-28
- 3.0.0-nightly-16eead67e-260927 — 2026-09-27
- 3.0.0-nightly-16eead67e-260926 — 2026-09-26
- 3.0.0-nightly-956ecbcb8-260925 — 2026-09-25
- 3.0.0-nightly-337f6a15a-260924 — 2026-09-24
- 3.0.0-nightly-f1cee8374-260923 — 2026-09-23
- 3.0.0-nightly-8ae29fa17-260922 — 2026-09-22
- 3.0.0-nightly-8ae29fa17-260921 — 2026-09-21
- 3.0.0-nightly-8ae29fa17-260920 — 2026-09-20
- 3.0.0-nightly-8ae29fa17-260919 — 2026-09-19
- 3.0.0-nightly-90ff0c6d6-260918 — 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
- … 1322 more at https://npm.io/package/react-stately/versions

## README

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

A library of React Hooks that provides cross-platform state management for your design system.

## Features

* 🏠 **Foundational** – React Stately provides the foundation and core logic for your component library. It handles state management for common components through an easy-to-use interface.
* 📱 **Cross-platform** – React Stately only provides state management, with no assumptions about the DOM or other view systems.
* ⚓️ **Powered by React Hooks** – React Stately is implemented as a library of React Hooks, which allows you to adapt them to your needs through composition.
* 🎨 **Design agnostic** – React Stately doesn’t make any assumptions about your design. It provides state management that’s intrinsic to the functionality of the component.

## Getting started

The easiest way to start building a component library with React Stately is by following our [getting started](https://react-spectrum.adobe.com/react-stately/getting-started.html) guide. It walks through all of the steps needed to install the hooks from npm, and create your first component.

### Example

Here is a very basic example of using React Aria.

```jsx
import {useRadioGroupState} from '@react-stately/radio';

function RadioGroup(props) {
  let state = useRadioGroupState(props);

  return (
    <>
      <label>
        <input
          type="radio"
          name={state.name}
          checked={state.selectedValue === 'dogs'}
          onChange={() => state.setSelectedValue('dogs')}
        />
        Dogs
      </label>
      <label>
        <input
          type="radio"
          name={state.name}
          checked={state.selectedValue === 'cats'}
          onChange={() => state.setSelectedValue('cats')}
        />
        Cats
      </label>
    </>
  );
}

<RadioGroup
  defaultValue="dogs"
  onChange={(value) => alert(`Selected ${value}`)}
/>
```

## Learn more

React Stately is part of a family of libraries that help you build adaptive, accessible, and robust user experiences.
Learn more about [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html) on [our website](https://react-spectrum.adobe.com/index.html).

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