Setting up Chakra UI in a Next.js Project
Tags: nextjs, chakraui
Published: 2021-03-19 22:17:13


If you ask me which React Component Library I love the most, then my answer won't be something super popular like Material UI, AntD, or ReactStrap. Instead, you will hear `Chakra UI` coming out of my mouth.

## What is Chakra UI?

This is what the homepage of Chakra UI describes itself 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 on a lot if you under-estimate 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.

When it comes to 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.

## Bootsraping Next.js

To bootstrap a new Next.js project, run the following command.

```bash
npx create-next-app next-chakra-ui-sample
```

or

```bash
yarn create-next app next-chakra-ui-sample
```

Enter the created project folder using

```bash
cd next-chakra-ui-sample
```

## Installing Chakra UI packages

Now install a couple of required dependencies.

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

or

```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

## 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`.

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

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

export default MyApp
```

## Custom theme

In case 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:

```js
// styles/theme.js
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.

```jsx
// pages/_app.js
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 project.

Thanks for reading this and ciao :)