Looking for Reakit's successor?Visit Ariakit
Skip to main content

Get started

Reakit is a lower level component library for building accessible high level UI libraries, design systems and applications with React.


First, make sure to have react and react-dom installed:

npm install react react-dom

Then, install reakit:

npm install reakit


Play with an example on CodeSandbox.

The code below will render an unstyled Button.

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "reakit/Button";

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

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

#Server Side Rendering

If you need SSR support, you must wrap your app with Reakit Provider. It will generate deterministic IDs for accessibility purposes both on the server and client.

import { Provider, Button } from "reakit";

function App() {
  return (

#Default styles

If you want to include default styles, you can use the experimental system feature with reakit-system-bootstrap. The code below will render a button with bootstrap-like styling.

import { Provider, Button } from "reakit";
import * as system from "reakit-system-bootstrap";

function App() {
  return (
    <Provider unstable_system={system}>

All the interactive examples in this documentation use reakit-system-bootstrap by default.


You can also use the UMD version of Reakit. Play with an example on JSBin.

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <div id="root"></div>
  <!-- Peer dependencies -->
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <!-- Reakit UMD package -->
  <script src="https://unpkg.com/reakit"></script>
  <script src="https://unpkg.com/reakit-system-bootstrap"></script>
  <!-- Usage -->
    const App = React.createElement(
      { unstable_system: ReakitSystemBootstrap }, 
      React.createElement(Reakit.Button, {}, "Button")
    ReactDOM.render(App, document.getElementById("root"));

Powered by Vercel

Released under the MIT License

Copyright © 2017-2023 Diego Haz