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 »
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.