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>;