Getting Started with Next.js

Installation#

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

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

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

App Directory Setup#

Next.js 13 introduces a new app/ directory / folder structure. By default it uses Server Components. However, Chakra UI only works in client-side components.

To use Chakra UI in server components, you need to convert them into client-side component by adding a 'use client'; at the top of your file.

We've also provided a @chakra-ui/next-js package that gives you a smoother experience when using Chakra UI in the app directory.

This package provides the CacheProvider which composes the Emotion.js' cache provider with the useServerInsertedHTML hook from next/navigation. This is necessary to ensure that computed styles are included in the initial server payload (during streaming).

// app/layout.tsx
'use client'
import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html lang='en'>
<head />
<body>
<CacheProvider>
<ChakraProvider>{children}</ChakraProvider>
</CacheProvider>
</body>
</html>
)
}

Note: Make sure to include the <head> tag in your layout component otherwise it will not work.

The 'use client' directive is still required to be added to the top of the page-related file.

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

If you're using Next.js 13, we've provided a @chakra-ui/next-js package that gives you a smoother experience when using Chakra UI Link component with next/link.

This package provides the Link which combines the functionality of the Next.js Link and Chakra UI Link components.

// app/page.tsx
'use client'
import { Link } from '@chakra-ui/next-js'
export default function Page() {
return (
<Link href='/about' color='blue.400' _hover={{ color: 'blue.500' }}>
About
</Link>
)
}

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 include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
},
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp

To further customize components or build your own design system, the theme-tools package includes useful utilities.

Color Mode Script#

The color mode script needs to be added before the content inside the body tag for local storage syncing to work correctly.

When setting the initial color mode, we recommend adding it as a config to your theme and reference that in the ColorModeScript.

To use ColorModeScript on a site with strict Content-Security-Policy, you can use the nonce prop that will be passed to the <script> tag.

// pages/_document.js
import { ColorModeScript } from '@chakra-ui/react'
import { Html, Head, Main, NextScript } from 'next/document'
import theme from './theme'
export default function Document() {
return (
<Html lang='en'>
<Head />
<body>
{/* 👇 Here's the script */}
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>
</Html>
)
}

Notes on TypeScript 🚨#

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.

ChakraProvider Props#

NameTypeDefaultDescription
resetCSSbooleantrueautomatically includes <CSSReset />
themeTheme@chakra-ui/themeoptional custom theme
colorModeManagerStorageManagerlocalStorageManagermanager to persist a users color mode preference in
portalZIndexnumberundefinedcommon z-index to use for Portal
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel