Navigate to [https://chakra-ui.com/getting-started/nextjs-guide](https://chakra-ui.com/getting-started/nextjs-guide)

Skip to Content

Build faster with Premium Chakra UI Components 💎

Learn more

Search the docs

Press
⌘
and
K
to-search
v2.3.7
v1.8.8
v0.8.x
Sponsor
Getting Started
Styled System
Components
Hooks
Community
Changelog
Blog
Installation
Upgrade to v2
Design Principles
Comparison
Contributing

FRAMEWORKS

Create React App
Next JS
Gatsby
Blitz JS
RedwoodJS
Remix
Vite
Meteor

INTEGRATIONS

Capsize
Formik
Framer Motion
React Hook Form
React Table
Storybook
Getting Started with Nextjs
Next.js 13#

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.

Installation#

In your Next.js project, install Chakra UI by running either of the following:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
COPY
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
COPY
Provider Setup#

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
COPY
Customizing theme#

If you intend to customise the default theme object to match your design requirements, you need to extend the theme.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

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


// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'


// 2. Extend the theme to in

Chakra-ui Workflow