Skip to content
⚡️Simple, Modular & Accessible UI Components for your React Applications
Branch: master
Clone or download

Welcome to Chakra UI ⚡️

All Contributors

  • Works out of the box. Chakra UI contains a set of polished React components that work out of the box.

  • Flexible & composable. Chakra UI components are built on top of a React UI Primitive for endless composability.

  • Accessible. Chakra UI components follows the WAI-ARIA guidelines specifications.

  • Dark Mode 😍: All components are dark mode compatible.

Looking for the documentation?

Supporting Chakra UI 💖

Chakra UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of amazing contributors. If you're happy with Chakra UI and would like to support it's ongoing development, we'll appreciate some support.

What's the difference between Patreon and OpenCollective?

Funds donated via Patreon directly support Segun Adebayo's work on Chakra UI. Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.

Installing Chakra UI

⚡️Chakra UI is made up of multiple components and tools which you can import one by one. All you need to do is install the @chakra-ui/core package and its peer dependencies:

$ yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
# or
$ npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Getting set up

To start using the components, please follow these steps:

  1. Wrap your application in a ThemeProvider provided by @chakra-ui/core
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/core";

const App = ({children}) => (

ColorModeProvider is a context that provides light mode and dark mode values to the components. It also comes with a function to toggle between light/dark mode.

  1. Now you can start using components like so!:
import { Button } from "@chakra-ui/core";

const App = () => <Button>I just consumed some ⚡️Chakra!</Button>;


Feel like contributing? That's awesome! We have a contributing guide to help guide you.

The components to be built come from the Aria Practices Design Patterns and Widgets.


Thanks goes to these wonderful people (emoji key):

Segun Adebayo
Segun Adebayo

💻 🚧 📖 💡 🎨
Tioluwani Kolawole
Tioluwani Kolawole

📖 💡 🚧
Devansh Jethmalani
Devansh Jethmalani

Adrian Aleixandre
Adrian Aleixandre

💻 📖


This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.