Package Exports

@ariakit/react
@ariakit/react/button
@ariakit/react/checkbox
@ariakit/react/collection
@ariakit/react/combobox
@ariakit/react/command
@ariakit/react/composite
@ariakit/react/dialog
@ariakit/react/disclosure
@ariakit/react/focus-trap
@ariakit/react/focusable
@ariakit/react/form
@ariakit/react/group
@ariakit/react/heading
@ariakit/react/hovercard
@ariakit/react/menu
@ariakit/react/package.json
@ariakit/react/popover
@ariakit/react/portal
@ariakit/react/radio
@ariakit/react/role
@ariakit/react/select
@ariakit/react/separator
@ariakit/react/tab
@ariakit/react/toolbar
@ariakit/react/tooltip
@ariakit/react/visually-hidden

Readme

Ariakit

Toolkit for building accessible web apps with React.
Explore website »

This is the Ariakit main branch (What is Ariakit?), which is still in beta.
If you're looking for Reakit, check out the reakit branch.

Installation

npm:

npm i @ariakit/react

pnpm:

pnpm add @ariakit/react

Yarn:

yarn add @ariakit/react

Usage

import { createRoot } from "react-dom/client";
import * as Ariakit from "@ariakit/react";

function App() {
  const dialog = Ariakit.useDialogStore();
  return (
    <>
      <Ariakit.Button onClick={dialog.toggle}>Open dialog</Ariakit.Button>
      <Ariakit.Dialog store={dialog}>
        <Ariakit.DialogHeading>Welcome</Ariakit.DialogHeading>
        <Ariakit.DialogDescription>
          Welcome to Reakit!
        </Ariakit.DialogDescription>
      </Ariakit.Dialog>
    </>
  );
}

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

Contributing

Follow the instructions on the contributing guide.