Welcome to Chakra UI ⚡️

• 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?

https://chakra-ui.com

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.

• Become a backer or sponsor on Patreon.
• Become a backer or sponsor on OpenCollective.

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}) => (
  <ThemeProvider>
    <ColorModeProvider>{children}</ColorModeProvider>
  </ThemeProvider>
);

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.

2. Now you can start using components like so!:

import { Button } from "@chakra-ui/core";

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

Contributing

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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Segun Adebayo 💻 🚧 📖 💡 🎨

Tioluwani Kolawole 📖 💡 🚧

Devansh Jethmalani 💻

Adrian Aleixandre 💻 📖

Lee 📖

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