Skip to main content


Reakit doesn't depend on any CSS library. Components are unstyled by default. So you're free to use whatever approach you want. Each component returns a single HTML element that accepts all HTML props, including className and style.


Reakit components are unstyled by default:

import { Button } from "reakit";

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

#Inline styles

Just use the style prop.

import { Button } from "reakit";

function Example() {
  return <Button style={{ color: "white", background: "red" }}>Button</Button>;

#CSS Modules

Assuming you've set up CSS modules (default in create-react-app but easy to hand roll via css-loader), you can simply import your css module and apply to className.

import { Button } from "reakit";
import styles from "./Example.module.css";

function Example() {
  return <Button className={styles.buttonStyles}>Button</Button>;

#CSS in JS

Example with emotion:

import { Button } from "reakit";
import { css } from "emotion";

function Example() {
  return (
        color: "white",
        background: "red",
        "&:not([disabled]):hover": { background: "green" },
        "&:not([disabled]):active": { background: "blue" },

Example with styled-components:

When using styled-components, you will have to use forwardedAs prop instead of Reakit as prop since styled-components have their own built-in as prop. Otherwise, you can use render props to achieve the same functionality

import { Button } from "reakit";
import styled from "styled-components";

const StyledButton = styled(Button)`
  color: white;
  background: red;
  &:not([disabled]):hover {
    background: green;

  &:not([disabled]):active {
    background: blue;

function Example() {
  return <StyledButton>Button</StyledButton>;

Powered by Vercel

Released under the MIT License

Copyright © 2017-2021 Diego Haz