Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub
Reakit is featured on Product Hunt!

Get started

#Installation

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

npm install react react-dom

Then, install reakit:

npm install reakit

#Usage

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 (
    <Provider>
      <Button>Button</Button>
    </Provider>
  );
}

#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}>
      <Button>Button</Button>
    </Provider>
  );
}

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

#CDN

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reakit</title>
</head>
<body>
  <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 -->
  <script>
    const App = React.createElement(
      Reakit.Provider, 
      { unstable_system: ReakitSystemBootstrap }, 
      React.createElement(Reakit.Button, {}, "Button")
    );
    ReactDOM.render(App, document.getElementById("root"));
  </script>
</body>
</html>