# @ariakit/react

> Toolkit for building accessible web apps with React

Latest version **0.4.40** (published 2026-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ariakit/react
pnpm add @ariakit/react
yarn add @ariakit/react
bun add @ariakit/react
```

## Health

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

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.40 |
| Published | 2026-09-14 |
| First published | 2022-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 8613 |
| Author | Diego Haz |
| Maintainers | diegohaz, ariakit-bot, benrodrs, daniguardiola |
| Keywords | a11y, ariakit, components, react, toolkit, ui |

## Links

- npm: https://www.npmjs.com/package/@ariakit/react
- Repository: https://github.com/ariakit/ariakit
- Homepage: https://ariakit.com
- Funding: https://opencollective.com/ariakit
- npm.io page: https://npm.io/package/@ariakit/react

## Dependencies (1)

- [@ariakit/react-components](https://npm.io/package/@ariakit/react-components.md) 0.6.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.4.40 (latest) — 2026-09-14
- 0.4.39 — 2026-09-02
- 0.4.38 — 2026-08-24
- 0.4.37 — 2026-08-09
- 0.4.36 — 2026-08-02
- 0.4.35 — 2026-07-23
- 0.4.34 — 2026-07-15
- 0.4.33 — 2026-07-15
- 0.4.32 — 2026-07-03
- 0.4.31 — 2026-06-29
- 0.4.30 — 2026-06-23
- 0.4.29 — 2026-05-31
- 0.4.28 — 2026-05-23
- 0.4.27 — 2026-05-23
- 0.4.26 — 2026-04-17
- … 69 more at https://npm.io/package/@ariakit/react/versions

## README

<h1 align="center">Ariakit</h1>

<p align="center">
  Toolkit for building accessible web apps with <a href="https://reactjs.org">React</a>.
  <br>
  <a href="https://ariakit.com"><strong>Explore website »</strong></a>
</p>

<br>

<div align="center">
  <a href="https://npmjs.org/package/@ariakit/react">
    <img alt="NPM version" src="https://img.shields.io/npm/v/@ariakit/react.svg?logo=npm&color=007acc" />
  </a>
  <a href="https://github.com/ariakit/ariakit/releases">
    <img alt="GitHub Release Date" src="https://img.shields.io/github/release-date/ariakit/ariakit?logo=github&color=007acc">
  </a>
  <a href="https://github.com/ariakit/ariakit/discussions">
    <img alt="GitHub Discussions" src="https://img.shields.io/github/discussions/ariakit/ariakit?logo=github&color=007acc">
  </a>
  <br>
  <a href="https://npmjs.org/package/@ariakit/react">
    <img alt="NPM downloads" src="https://img.shields.io/npm/dm/@ariakit/react.svg?logo=npm&style=social">
  </a>
  &nbsp;
  <a href="https://github.com/ariakit/ariakit/stargazers">
    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ariakit/ariakit?style=social">
  </a>
  &nbsp;
  <a href="https://bsky.app/profile/ariakit.com">
    <img alt="Follow Ariakit on Bluesky" src="https://img.shields.io/badge/Bluesky-0285FF?logo=bluesky&logoColor=fff">
  </a>
  &nbsp;
  <a href="https://discord.gg/WyHvnXsvMs">
    <img alt="Join the Ariakit Discord server" src="https://img.shields.io/badge/Discord-%235865F2.svg?&logo=discord&logoColor=white">
  </a>
</div>

<br>

## Installation

npm:

```
npm i @ariakit/react
```

pnpm:

```
pnpm add @ariakit/react
```

Yarn:

```
yarn add @ariakit/react
```

## Usage

```jsx
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { Button, Dialog, DialogHeading } from "@ariakit/react";

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogHeading>Ariakit</DialogHeading>
        <p>Welcome to Ariakit!</p>
      </Dialog>
    </>
  );
}

createRoot(document.getElementById("root")).render(<App />);
```

## Core Team

- [Diego Haz](https://bsky.app/profile/haz.dev)
- [Ben Rodri](https://bsky.app/profile/ben.ariakit.org)
- [Dani Guardiola](https://bsky.app/profile/dio.la)

## Attribution

Browser testing provided by
<a href="https://www.browserstack.com" target="_blank"><img src="https://user-images.githubusercontent.com/15015324/45184727-368fbf80-b1fe-11e8-8827-08dbc80b0fb1.png" height="80" align="center"></a>

## Contributing

Follow the instructions on the [contributing guide](https://github.com/ariakit/ariakit/blob/main/contributing.md).

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