Setting up Chakra UI in a Next.js Project

date
Mar 20, 2021
slug
nextjs-chakraui-start
status
Published
tags
Next.js
Chakra UI
summary
Let's add the super accessible Chakra UI to your amazing Next.js project
type
Post
If you ask me which React Component Library I love the most, my answer won't be something super popular like Material UI, AntD, or ReactStrap. Instead, you will hear Chakra UI.

What is Chakra UI?

What the creators of Chakra UI describe it as:
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Chakra UI is a latecomer to this ecosystem of React component libraries, but you will be missing out a lot if you underestimate how good it can be.

Why do I like Chakra UI?

Some of my favorite features about Chakra UI are :
  • All the components are accessible. No more looking for how you can make your button more accessible now.
  • TailwindCSS has inspired the color palette chosen for Chakra UI's default theme, and we all know how good those color choices are.
  • The default component looks gorgeous, and I rarely have to change anything before using them.
  • Adding dark mode support is as easy as breathing.
While using React, my go-to way to bootstrap a new project is to use Next.js instead of Create-React-App. The reason behind this choice is worthy of a blog post in itself. I will write one later probably.
So let's do some coding now.

Bootstrapping Next.js

To bootstrap a new Next.js project, run the following command.
npx create-next-app next-chakra
or
yarn create-next app next-chakra
Enter the created project folder using
cd next-chakra

Installing Chakra UI packages

Now install a couple of required dependencies.
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Configuring Chakra UI in the app

After installing all the dependencies, we have to wrap the root component inside the ChakraProvider component. This is so that we can access Chakra UI components in our other components later on. To do this we will wrap the root <Component {...pageProps} /> component inside _app.js file with ChakraProvider.
import { ChakraProvider } from '@chakra-ui/react'

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

export default MyApp

Custom theme

If you don't like the default theme colors or any other default styles, you can override or extend them. For doing that, create a theme.js file in the styles folder and add the following code to it:
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    overcompiled: {
      100: "#123FFF"
    },
  },
})

export default theme
Import the theme and pass it as a prop to the ChakraProvider Component.
import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/theme'

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

export default MyApp
Now you can use the color as overcompiled.100 in your components. And with this, you are good to go with using Chakra UI in your Next.js project.

© Nikit Singh 2020 - 2022