Chakra Provider setup for React

Khalid Khan

This code is to set up the Chakra provider in your react application. Please install the following dependencies before you start working.

Pre-install dependencies :

@chakra-ui/react
@chakra-ui/theme
@chakra-ui/theme-tools
react-icons

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

Library: @chakra-ui/react

Shortcut: chakra.provider.react

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider theme={custom_theme}> // Add your custom theme 
      <App />
    </ChakraProvider>
  )
}