Chakra UI Setup in React

In this Chakra UI Setup in React article we will learn all about chakra UI.


What is Chakra UI ?

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.


Chakra UI Setup in React / how to install Chakra UI

Let us discuss the steps required to install Chakra UI. 


1. Create a new project

The easiest way to generate a React project is by using the Create React App. Replace the first-app text with your app’s name.


npx create-react-app first-app
cd first-app

2. Chakra UI Installation :

Then, we have to install the Chakra UI library and its dependencies.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

3. Provider Setup

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx or index.tsx


import * as React from 'react'
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

Chakra UI Setup in React


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

4. Optional Setup

Customizing Theme :

If you intend to customise the default theme object 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.


// 1. Import the extendTheme function
import { extendTheme, ChakraProvider } from '@chakra-ui/react'
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}


I hope you like this article. 🙂

Also Read :