# Ariakit — Accessible Headless Components for React

> An open-source toolkit of unstyled, accessible React components built on WAI-ARIA patterns with first-class support for Tailwind CSS.

## Install

Save in your project root:

# Ariakit — Accessible Headless Components for React

## Quick Use
```bash
npm install @ariakit/react
```
```jsx
import { Select, SelectItem, SelectLabel, SelectPopover } from '@ariakit/react';

export default function App() {
  return (
    <div>
      <SelectLabel>Fruit</SelectLabel>
      <Select>Select a fruit</Select>
      <SelectPopover>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="cherry">Cherry</SelectItem>
      </SelectPopover>
    </div>
  );
}
```

## Introduction
Ariakit (formerly Reakit) is a headless component library for React that implements WAI-ARIA design patterns correctly out of the box. It provides fully accessible, unstyled primitives for common UI patterns like dialogs, menus, tabs, and comboboxes, letting developers apply their own styling while getting accessibility for free.

## What Ariakit Does
- Implements 30+ WAI-ARIA component patterns as unstyled React components
- Handles keyboard navigation, focus management, and screen reader support
- Provides composable component APIs where each part can be styled independently
- Supports both controlled and uncontrolled component usage patterns
- Works with CSS modules, Tailwind CSS, styled-components, and any styling solution

## Architecture Overview
Ariakit uses a store-based state management approach where each component group (Dialog, Menu, Select) has its own store instance. Components consume the store via context and render as plain HTML elements with ARIA attributes applied automatically. The composable API splits each pattern into named parts (Trigger, Content, Item) that can be rendered anywhere in the tree while maintaining their accessibility relationships.

## Self-Hosting & Configuration
- Install @ariakit/react and import components directly
- No global provider or theme configuration required
- Create stores with useDialogStore(), useMenuStore(), etc. for state management
- Apply styles via className, style prop, or data-attributes for state-based styling
- Works with React 18+ and supports concurrent features

## Key Features
- Composable API where each component part is independently renderable and stylable
- Built-in animated transitions using CSS or JavaScript animation libraries
- Stores can be shared across components for coordinated behavior
- TypeScript-first with precise generic types for component props
- Data attributes expose component state for CSS-based styling (data-active, data-open)

## Comparison with Similar Tools
- **Radix UI** — similar headless approach; Ariakit has a simpler store-based API and lighter bundle
- **React Aria** — lower-level hooks by Adobe; Ariakit provides ready-to-use component composition
- **Headless UI** — smaller set from Tailwind Labs; Ariakit covers more patterns with composable parts
- **shadcn/ui** — pre-styled with Tailwind; Ariakit is the unstyled primitive layer underneath such libraries
- **Downshift** — focused on combobox/select; Ariakit covers the full range of interactive components

## FAQ
**Q: What happened to Reakit?**
A: Reakit was renamed to Ariakit with a new API. The store-based architecture in Ariakit replaces Reakit's state hook pattern.

**Q: Can I animate Ariakit components?**
A: Yes. Ariakit supports CSS transitions via data attributes and JavaScript animations via the animated prop that delays unmounting.

**Q: Does Ariakit work with Next.js App Router?**
A: Yes. Components use client-side interactivity and should be in client components or wrapped with the "use client" directive.

**Q: How do I style state changes like open/closed?**
A: Ariakit applies data attributes (data-open, data-active-item) that you can target with CSS selectors or Tailwind's data-[] modifier.

## Sources
- https://github.com/ariakit/ariakit
- https://ariakit.org

---
Source: https://tokrepo.com/en/workflows/asset-d0868dbb
Author: AI Open Source