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?
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:
- 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.
- 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 📖 💡 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!