@chakra-ui/react
v2.10.2
Published
Responsive and accessible React UI components built with React and Emotion
Downloads
2,569,202
Readme
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
ThemeProvider
provided by @chakra-ui/react
import { ThemeProvider, ColorModeProvider } 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):
This project follows the all-contributors specification. Contributions of any kind welcome!