Chakra UI Provider setup for NextJS

Khalid Khan

This code is used to set up the Chakra UI Provider.

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application.

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and wrap the Component with the ChakraProvider:

Library: @chakra-ui/react

Shortcut: chakra.provider.nextjs

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

function filename({ Component, pageProps }) {
  return (
    <ChakraProvider theme= {custom_theme}> //Add your Custom theme
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default filename