Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Refer to official documentation for detailed usage. →
- For Chakra UI to work correctly, you need to setup the ChakraProvider at the root of your application. If you need to customize the default chakra theme, you can extend the theme from
@chakra-ui/reactand pass your extended theme to the provider.
- Extend the default theme with seperate overriden style files.
- Override global styles.
- Override other parts of the style(fontSize, colors...).
If you're curious as to what theme styles you can override, please reference the default theme foundation style files.
All this work will be handled automatically by CLI, so you don’t need to do anything extra as long as you choose Chakra UI plugin during the project creation phase.
Chakra UI also provides a way to write component styles that is easy to maintain over the life of a growing and changing project
Refer to official documentation on component style for detailed usage. →
Chakra UI comes with built-in support for managing color mode in your apps.
Refer to official documentation on color mode for detailed usage. →
Chakra UI supports responsive styles out of the box. Instead of manually adding @media queries and adding nested styles throughout your code, Chakra UI allows you provide object and array values to add mobile-first responsive styles.
Chakra UI uses the min-width media query for responsive design.
If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
@chakra-ui/reactand its dependencies.