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/[email protected]^11 @emotion/[email protected]^11 [email protected]^6 # yarn yarn add @chakra-ui/react @emotion/[email protected]^11 @emotion/[email protected]^11 [email protected]^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