Getting started

Ariakit is an open source library that provides lower-level React⁠ components and hooks for building accessible web apps, design systems, and component libraries.

Installation

1
First, make sure you have react and react-dom installed. Ariakit works with React v17 and above.

Then, install Ariakit using your package manager of choice:

npm install @ariakit/react
npm install @ariakit/react

yarn add @ariakit/react
yarn add @ariakit/react

pnpm add @ariakit/react
pnpm add @ariakit/react

Usage

Ariakit exports a set of unstyled React components and hooks that you can use to build accessible web apps. For example, you can use the Button component to create a button:

1234567891011
import "./button.css";
import { Button } from "@ariakit/react";

export default function Example() {
  return (
    <Button className="focusable clickable button button-default">
      Button
    </Button>
  );
}

import "./button.css";
import { Button } from "@ariakit/react";

export default function Example() {
  return (
    <Button className="focusable clickable button button-default">
      Button
    </Button>
  );
}

CDN

You can also use Ariakit directly in the browser via a CDN. This method is only for development purposes and is not recommended for production.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Ariakit</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Usage -->
    <script type="text/babel" data-type="module">
      import * as React from "https://esm.sh/react";
      import { createRoot } from "https://esm.sh/react-dom";
      import { Button } from "https://esm.sh/@ariakit/react";

      function App() {
        return <Button>Button</Button>;
      }

      createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Ariakit</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Usage -->
    <script type="text/babel" data-type="module">
      import * as React from "https://esm.sh/react";
      import { createRoot } from "https://esm.sh/react-dom";
      import { Button } from "https://esm.sh/@ariakit/react";

      function App() {
        return <Button>Button</Button>;
      }

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

Next steps

Continue reading our Guide to learn more about Ariakit:

StylingAriakit provides unstyled components by default. You're free to style them using your favorite styling method.

CompositionThe render prop makes Ariakit components more versatile, allowing you to easily replace the default HTML element or enhance its features with custom components.

Check out our Components, Examples, and API Reference pages for more information.

Getting started

Installation

Usage

CDN

Next steps

Stay tuned