DEV Community

Cover image for Get started with Chakra-UI
Anjan Shomodder
Anjan Shomodder

Posted on

Get started with Chakra-UI

In this blog, I will teach you how to get Started with Chakra-UI.

Video Tutorial

What is Chakra-UI?

Chakra-UI is a React UI library that has tons of pre-styled components and utilities that you can use on the website.

Installation

  • I will use nextjs.
yarn create next-app <my-app>
Enter fullscreen mode Exit fullscreen mode
  • Install packages:
cd <my-app>
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Enter fullscreen mode Exit fullscreen mode

Setup Chakra-UI with next

  • Wrap the Component component with the ChakraProvider component.
import { ChakraProvider } from '@chakra-ui/react'

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

export default MyApp
Enter fullscreen mode Exit fullscreen mode

Now we can use chakra-UI components.

How to import components

Always import the components and utilities as a named import from the @chakra-ui/react package.

import { Button, Text, Heading, Box, Link, useTheme } from '@chakra-ui/react'

const Index = () => {
    return <Heading>Heading 1</Heading>
}

export default Index
Enter fullscreen mode Exit fullscreen mode

Image description

Custom styles

There are two ways to customize the styles.

const Index = () => {
    return (
        <Heading color='red' fontSize='5rem'>
            Heading 1
        </Heading>
    )
}
Enter fullscreen mode Exit fullscreen mode
  • SX prop: With sx prop, you can use any custom style as an object. All the property name has to be camelcase.
const Index = () => {
    return (
        <Heading
            sx={{
                color: 'red',
                fontSize: '5rem',
            }}
        >
            Heading 1
        </Heading>
    )
}
Enter fullscreen mode Exit fullscreen mode

Image description

Change the color mode

We can change the color mode using the useColorMode hook.

import React from 'react'

import { IconButton, useColorMode } from '@chakra-ui/react'

import { MoonIcon, SunIcon } from '@chakra-ui/icons'

const ToggleMode = () => {
    const { colorMode, toggleColorMode } = useColorMode()
    return (
        <IconButton
            icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
            onClick={toggleColorMode}
        />
    )
}

export default ToggleMode
Enter fullscreen mode Exit fullscreen mode

Light mode

Image description

Dark mode

Image description

To learn more about chakra-UI theme and responsive styles, please watch the video tutorial.

Commonly Used Components

Here are some of the components that I use most.

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it.
Please consider like this video and subscribe to my channel.

image

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

Discussion (0)