How to use ChakraUI with NextJS?

May 20, 2022

banner

Hello, my fellow readers! It's been a long time, am I right? Well, I apologise for not being able to create content for you, mainly due to my board examinations. It's never easy to design a user interface, but Chakra UI is a beautiful UI package for getting your Next.js application up and running quickly while yet retaining aesthetics. You'll learn how to set up a small Next.js app with Chakra UI in this tutorial.

Each component of the Chakra is designed to be accessible and the Chakra maintainers have gone to great lengths to ensure that the components adhere to the WAI-ARIA rules. It also comes with a simple API that allows developers to get started quickly. It enables individuals and teams to create inclusive apps without having to worry about assembling a variety of components.

Chakra leverages Emotion to allow developers to style their components from inside of their JavaScript. It comes with a preset theme, but custom options allow you to alter it quickly.

Let’s get started

So first, we are going to be setting up Chakra UI and NextJS.

1️⃣ Create a NextJS Project

You can create a blank Next.js project by running the following commands on your terminal of choice.

npx create-next-app chakra-project

Imgur

2️⃣ Adding Chakra UI to your Next.js Application

To get started using Chakra UI, install the core Chakra UI package by running:

1
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

3️⃣ Adding in Chakra Providers

Chakra makes use of the ChakraProvider component, which surrounds your website in a context that includes attributes like the Chakra theme, colour mode functionality, CSS reset, global styles, and more.

So, you need to add the following code in ./pages/_app.js:

1
import { ChakraProvider } from '@chakra-ui/react';
2
    
3
    const MyApp = ({ Component, pageProps }) => {
4
      return (
5
        <ChakraProvider>
6
          <Component {...pageProps} />
7
        </ChakraProvider>
8
      );
9
    }
10
    
11
    export default MyApp;

If you are using Typescript, use the ChakraProvider component in ./pages/_app.tsx and replace by the following code:

1
import type { AppProps } from 'next/app';
2
import { ChakraProvider } from '@chakra-ui/react';
3
    
4
    const MyApp = ({ Component, pageProps }: AppProps) => {
5
      return (
6
        <ChakraProvider>
7
          <Component {...pageProps} />
8
        </ChakraProvider>
9
      );
10
    }
11
    
12
    export default MyApp;

4️⃣ Complete the project setup and test it

In your ./pages/index.jsx or ./pages/index.tsx, add the following code:

1
import { Heading } from '@chakra-ui/react';
2
    
3
    const Home = () => {
4
      return (
5
        <Heading>Welcome to Chakra + Next.js</Heading>
6
      ); 
7
    }
8
    
9
    export default Home;

Now use the npm run dev command to start the dev server

If everything was imported correctly, you should see this when the component reloads.

Imgur

Creating a hero component

Now that your project is working perfectly, we will be making a hero component to learn how Chakra works

First, create a ./components/Hero.js file. And inside try out the following example code:

1
import { Container, Stack, Flex, Box, Heading, Text, Image, useColorModeValue } from "@chakra-ui/react";
2
    import Blob from './Blob';
3
    const Hero = () => {
4
      return (
5
        <Container maxW={'7xl'}>
6
          <Stack
7
            align={'center'}
8
            spacing={ { base: 8, md: 10 } }
9
            py={ { base: 20, md: 28 } }
10
            direction={ { base: 'column', md: 'row' } }>
11
            <Stack flex={1} spacing={ { base: 5, md: 10 } }>
12
              <Heading
13
                lineHeight={1.1}
14
                fontWeight={600}
15
                fontSize={ { base: '3xl', sm: '4xl', lg: '6xl' } }>
16
                <Text
17
                  as={'span'}
18
                  position={'relative'}
19
                  _after={ {
20
                    content: "''",
21
                    width: 'full',
22
                    height: '20%',
23
                    position: 'absolute',
24
                    bottom: 1,
25
                    left: 0,
26
                    bg: 'green.400',
27
                    zIndex: -1,
28
                  } }>
29
                  NextJS + ChakraUI
30
                </Text>
31
                <br />
32
                <Text as={'span'} color={'red.400'}>
33
                  Tutorial by Abhiraj Bhowmick
34
                </Text>
35
              </Heading>
36
            </Stack>
37
            <Flex
38
              flex={1}
39
              justify={'center'}
40
              align={'center'}
41
              position={'relative'}
42
              w={'full'}>
43
              <Blob
44
                w={'150%'}
45
                h={'150%'}
46
                position={'absolute'}
47
                top={'-20%'}
48
                left={0}
49
                zIndex={-1}
50
                color={useColorModeValue('cyan.50', 'cyan.400')}
51
              />
52
              <Box
53
                position={'relative'}
54
                height={'300px'}
55
                rounded={'2xl'}
56
                boxShadow={'2xl'}
57
                width={'full'}
58
                overflow={'hidden'}>
59
                <Image
60
                  alt={'Hero Image'}
61
                  fit={'cover'}
62
                  align={'center'}
63
                  w={'100%'}
64
                  h={'100%'}
65
                  src={
66
                    'https://og-image.vercel.app/**Next.js%20Chakra**%20Starter.png?theme=light&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fraw.githubusercontent.com%2Fchakra-ui%2Fchakra-ui%2Fbf775929a6d73a3aa69e44d5d38542449871475c%2Flogo%2Flogomark-colored.svg' // We use a simple image here, you can change as per your wish.
67
                  }
68
                />
69
              </Box>
70
            </Flex>
71
          </Stack>
72
        </Container>
73
      );
74
    }
75
    export default Hero;

You may be wondering when the heck did we make a blob? Well, we're going to do it right now!

Create a ./components/Blob.jsx file with the following code:

1
import { Icon, IconProps } from "@chakra-ui/react";
2
    
3
    const Blob = (props: IconProps) => {
4
      return (
5
        <Icon
6
          width={'100%'}
7
          viewBox="0 0 578 440"
8
          fill="none"
9
          xmlns="http://www.w3.org/2000/svg"
10
          {...props}
11
        >
12
          <path
13
            fillRule="evenodd"
14
            clipRule="evenodd"
15
            d="M239.184 439.443c-55.13-5.419-110.241-21.365-151.074-58.767C42.307 338.722-7.478 282.729.938 221.217c8.433-61.644 78.896-91.048 126.871-130.712 34.337-28.388 70.198-51.348 112.004-66.78C282.34 8.024 325.382-3.369 370.518.904c54.019 5.115 112.774 10.886 150.881 49.482 39.916 40.427 49.421 100.753 53.385 157.402 4.13 59.015 11.255 128.44-30.444 170.44-41.383 41.683-111.6 19.106-169.213 30.663-46.68 9.364-88.56 35.21-135.943 30.551z"
16
            fill="currentColor"
17
          />
18
        </Icon>
19
      );
20
    };
21
    
22
    export default Blob;
23
    For TypeScript version, create a ./components/Blob.tsx file:
24
    import { Icon } from "@chakra-ui/react";
25
    
26
    const Blob = (props) => {
27
      return (
28
        <Icon
29
          width={'100%'}
30
          viewBox="0 0 578 440"
31
          fill="none"
32
          xmlns="http://www.w3.org/2000/svg"
33
          {...props}
34
        >
35
          <path
36
            fillRule="evenodd"
37
            clipRule="evenodd"
38
            d="M239.184 439.443c-55.13-5.419-110.241-21.365-151.074-58.767C42.307 338.722-7.478 282.729.938 221.217c8.433-61.644 78.896-91.048 126.871-130.712 34.337-28.388 70.198-51.348 112.004-66.78C282.34 8.024 325.382-3.369 370.518.904c54.019 5.115 112.774 10.886 150.881 49.482 39.916 40.427 49.421 100.753 53.385 157.402 4.13 59.015 11.255 128.44-30.444 170.44-41.383 41.683-111.6 19.106-169.213 30.663-46.68 9.364-88.56 35.21-135.943 30.551z"
39
            fill="currentColor"
40
          />
41
        </Icon>
42
      );
43
    };
44
    
45
    export default Blob;

Once you've created your hero and blob component, import Hero.jsx into your ./pages/index.js file like so:

1
import Hero from '../components/Hero';
2
    
3
    const Home = () => {
4
      return (
5
        <Hero />
6
      );
7
    }
8
    
9
    export default Home;

After you’ve done all these steps, your project should look like this in the dev server:

Imgur

Congratulations! 🎉 Now that you've learned how to make excellent user interfaces, it's time to get your Chakra on! 🕉️

Conclusion

Next.js loads only the Javascript and CSS that are needed for any given page. This makes for much faster page loading times. ChakraUI is made up of basic building blocks that can help you build the front-end of your web app and it is customizable and reusable.

Using both these technologies together efficiently will make your work much easier.

In this article, we have covered using ChakraUI with NextJS. I hope you've learned something valuable from this article.

We learned how to:

How to set up Chakra UI with NextJS
How to create a hero component with ChakraUI

Thank you for reading

If you liked this post, follow me on Twitter for daily threads on web dev resources.