How to add chakra-ui in next.js project? – Code Example

In this article I will show you how you can add chakra-ui in your next.js project. First, you will need to install chakra-ui using npm or yarn. Then import ChakraProvider component into pages/_app.js or pages/_app.ts file. Last step is to wrap <Component> into <ChakraProvider>.

Code Example

1. Installing Chakra-ui

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

# yarn
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

2. Import ChakraProvider and Wrap component

Open pages/_app.js or pages/_app.ts file –

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

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp