⚡️
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
@teste-ui/react
package:
$ yarn add @teste-ui/react
# or
$ npm install --save @teste-ui/react
Getting set up
To start using the components, please follow these steps:
- Wrap your application in a
ThemeProvider
provided by @teste-ui/react
import { ThemeProvider, ColorModeProvider } from "@teste-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 "@teste-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!