Black Lives Matter.  Support the Equal Justice Initiative.
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 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 libraries like styled-components, you'll not be able to use the Reakit as prop since styled components have their own built-in as prop which is not passed down to the underlying component. You can use render props instead 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>;