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