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
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/react package:
$ yarn add @chakra-ui/react
# or
$ npm install --save @chakra-ui/react
Getting set up
To start using the components, please follow these steps:
- Wrap your application in a
ThemeProviderprovided by @chakra-ui/react
import { ColorModeProvider, ThemeProvider } from "@chakra-ui/react"
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.
- Now you can start using components like so!:
import { Button } from "@chakra-ui/react"
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 📖 💡 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!