Skip to Content
Sponsor

Getting Started

Installation#

Inside your React project directory, install Chakra UI by running the following:

For create-react-app installation instructions, check this CRA templates guide.

Setup Provider#

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 pages/_app.js or pages/_app.tsx
  • 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 index.js or index.tsx

Add custom theme (Optional)#

If you need to customize the default chakra theme to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

ChakraProvider Props#

NameTypeDefaultDescription
resetCSSbooleantrueautomatically includes <CSSReset />
themeTheme@chakra-ui/themeoptional custom theme
colorModeManagerStorageManagerlocalStorageManagermanager to persist a users color mode preference in
portalZIndexnumberundefinedcommon z-index to use for Portal

That's it, you're good to go!

Optional Packages#

  • Icons: If you want to use the icons from Chakra UI, install @chakra-ui/icons
  • Theme Tools: If you intend to customize components or build your own design system, this package includes useful utilities. Install @chakra-ui/theme-tools.

Notes on TypeScript 🚨#

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 typescript to ^3.8.0.

See the guide for our create-react-app templates if you'd like to generate a Chakra-enabled create-react-app project from scratch.

Contributing#

Please see our contribution guidelines to learn how you can contribute to this project.

Edit this page