Inside your React project directory, install Chakra UI by running the following:
create-react-appinstallation instructions, check this CRA templates guide.
For Chakra UI to work correctly, you need to setup the
ChakraProvider at the
root of your application.
Go to the root of your application and do this:
- For Next.js, you need to set this up in
- For Gatsby, install the
@chakra-ui/gatsby-plugin. It does it automatically for you.
- For Create React App, you need to set this up in
If you need to customize the default chakra theme to match your design
requirements, you can extend the
Chakra UI provides an
extendTheme function that deep merges the default theme
with your customizations.
|resetCSS||automatically includes |
|theme||optional custom theme|
|colorModeManager||manager to persist a users color mode preference in|
|portalZIndex||common z-index to use for |
That's it, you're good to go!
Please note that when adding Chakra UI to a TypeScript project, a minimum
TypeScript version of
3.8.0 is required.
If you're adding Chakra UI to a
create-react-app project, this means you'll
need to manually upgrade
See the guide for our create-react-app
templates if you'd like to generate a Chakra-enabled
Please see our contribution guidelines to learn how you can contribute to this project.