Ariakit

Ariakit is one of the oldest headless React libraries and remains one of the most rigorous about matching the WAI-ARIA Authoring Practices exactly. Its own description is telling: a lower-level library for building higher-level libraries.

At a glance

Install	npm install @ariakit/react
Styling	none, fully agnostic
State model	explicit stores you create and share
Scope	lower-level than Radix or Base UI
MCP server	not published
License	MIT

Install

npm install @ariakit/react

The store model is the difference

Where most headless libraries hide state inside a context provider, Ariakit hands you a store you create yourself and can pass anywhere. Controlling a menu from a keyboard shortcut three components away is a normal operation rather than a workaround.

import * as Ariakit from "@ariakit/react"

const dialog = Ariakit.useDialogStore()

<Ariakit.Button onClick={dialog.toggle} className="btn">Rename</Ariakit.Button>
<Ariakit.Dialog store={dialog} className="panel">
  <Ariakit.DialogHeading>Rename project</Ariakit.DialogHeading>
  <Ariakit.DialogDismiss className="btn">Cancel</Ariakit.DialogDismiss>
</Ariakit.Dialog>

Choose it if

• You are building a component library of your own and want the layer beneath.
• You need to drive component state from outside the component tree.
• ARIA correctness by the letter of the specification matters to you.

Look elsewhere if

• You want the largest community and the most examples. Radix and Base UI are far ahead there.
• You want components rather than primitives. This is deliberately lower-level.