Getting Started

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.

Using components#

Simply import components by name from @chakra-ui/core package, as demonstrated below.

Injecting global styles#

Sometimes you may need to apply css reset styles to your application. Chakra UI exports a CSSReset that'll remove browser default styles. It's heavily inspired by Tailwind's preflight

🚨 We highly recommend that you add the CSSReset at the root of your application to ensure all components work correctly.

Adding Icons#

You can use custom icons from standard libraries like react-icons or you can add the icon path in 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 this;


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