how to use chakra ui in next.js 13

How to Use Chakra UI in Next.JS 13

updated 21/01/23 By frontendshape

In this section we will see how to use chakra ui in nextjs 13. For this section we will use next 13 with typescript.


Create Next.JS 13 App

Chose below command to create next js app.

npx create-next-app@latest
# or
yarn create next-app
# or
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript


Note: Next.js 13 introduces a new app/ directory / folder structure. By default it uses Server Components. To use Chakra UI in those components, you need to convert them into client-side component by adding a 'use client'; at the top of your file. Chakra UI only works in client-side components.

If you're not using the new app/ directory, there's no need to add the 'use client'; directive.



Install Chakra UI in Next.JS

Run below command to install chakra ui in nextjs

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion



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:

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

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

export default MyApp


In nextjs with typescript project.

_app.tsx

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}


Now Test Chakra UI components.

import Head from "next/head";
import { Heading, Flex } from "@chakra-ui/react";

export default function Home() {
  return (
    <>
      <Head>
        <title>Next App with Chakra UI</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Flex height="100vh" alignItems="center" justifyContent="center">
          <Heading>Install Chakra UI In NextJS 13</Heading>
        </Flex>
      </main>
    </>
  );
}
chakra ui with nextjs 13

chakra ui with nextjs 13