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:

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

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

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

export default function Example() {
  return <Button className="button">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.

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Guide.

Read latest issue