Install Chakra UI and its peer dependencies.
Create a theme object to include custom color, typography, and layout values. Chakra UI comes with a default theme, so this step is optional.
You can also extend the theme to add your custom colors, fonts, etc.
Add the theme to your application with the
ThemeProvider, passing in the theme
object as a prop.
Simply import components by name from
@chakra-ui/core package, as demonstrated
Injecting global styles#
Sometimes you may need to apply css reset styles to your application. Chakra UI
CSSReset that'll remove browser default styles. It's heavily
🚨 We highly recommend that you add the
CSSReset at the root of your
application to ensure all components work correctly.
You can use custom icons from standard libraries like
react-icons or you can add the icon
the theme object.
To add the icon to the theme object, add the
icons key as shown below.
Once you add the icons, you can then use them within the
Icon component, like
Please see our contribution guidelines to learn how you can contribute to this project.
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo