@ariakit/react

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.