DEV Community

loading...
Cover image for Why you should use Chakra UI ⚡️ ?

Why you should use Chakra UI ⚡️ ?

Adyasha Mohanty
Creative Frontend Developer. Works with React, Redux and in love with Next.js ♡
Originally published at adyablogs.tech Updated on ・3 min read

Before beginning coding one significant question sprung up always: “Which library would it be a good idea to style the components?”

I’ve worked on various libraries such as Bootstrap, Material UI or styled-components. And you may be thinking why you need another UI library when you already have a big alternative.
Recently, Chakra UI ⚡️ has gained a lot of attraction because of its accessibility and high customization.

Installation⚙️

Chakra UI can be installed via NPM/Yarn.

// If you are using npm:
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

// or, using Yarn:
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Enter fullscreen mode Exit fullscreen mode

Once the packages are installed, a provider needs to be configured.


import { ChakraProvider } from "@chakra-ui/react";

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

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

Benefits of Chakra UI 📖

  • Simpler Components : The best feature of Chakra UI is how components are designed to be small so that you can compose them together. You can build bigger elements easily by arranging them the same as HTML tags.

Let's look here: Box and Text are the most basic components just like div and p tags respectively.

<Header>
 <Box w={{ base: "70%", sm: "50%", md: "40%" }}>
   <Text>Hey, Adyasha!</Text>
   <Button>Click me</Button>
 </Box>
</Header>
Enter fullscreen mode Exit fullscreen mode

Don't forgot to import the components: Header, Box, Text from @chakra-ui/react

Note: For better sight, you can check the official documentation, there you can see plenty of components which will be enough for building your project.

  • Easy to theme and customize : One of the advantages of Chakra UI is that you can easily adjust it to your design needs. Inside the styles folder, Create a theme.js file. You can specify things like font-family, font-sizes, colors, breakpoints, etc.
import { extendTheme } from '@chakra-ui/react'

const customtheme = extendTheme({
        Heading: {
            variants: {
                h1: {
                    fontSize: '4xl', fontWeight: 'bold'
                },
                h2: {
                    fontSize: '2xl', fontWeight: 'semibold'
                }
            }
        }
})

export default customtheme
Enter fullscreen mode Exit fullscreen mode
  • Dark mode support : By default, most of Chakra's components are dark mode compatible. A little bit of change in theme config and you are good to go ✈︎

GIF

Note: In some cases, when you switch to dark mode and refresh the page, you might experience a quick flash of white mode before it switches correctly and they're looking to fix it.

  • Responsive styles : Chakra UI supports responsive styles out of the box. To add them, we can set default breakpoints or you can create your own.
import { createBreakpoints } from "@chakra-ui/theme-tools"

const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
})
Enter fullscreen mode Exit fullscreen mode

You can use these breakpoints to resize your box or div:

<Box width={{sm: '200px', md: '400px', xl: '600px'}}>
  Me, fully responsive :)
</Box>
Enter fullscreen mode Exit fullscreen mode

Preview 👀:

I built a simple project or you can say just a landing page with NextJS and Chakra UI and the reason behind this project is to learn more about the features of Chakra UI and it was by far the easiest component library I’ve tried so far.

Take a sneak peek:
image

This is all only a little model I think if you want to cover all the customisation of this library go check the official documentation.

📍 Conclusion:

As a promising new library, it is constantly improving and the hype is building around the library. More components will probably be added soon. So you can consider using it for your next React project :D

I share what I think on Twitter💙. This post is also posted on my blog page.

🙌 Support me:

My projects are fueled by coffees ☕, get one for me!



Discussion (3)

Collapse
lyrod profile image
Lyrod

I think this is too much. ~180KB gzipped just for a really simple page.

Good article btw

Collapse
adyasha8105 profile image
Adyasha Mohanty Author • Edited

But I think its ~89KB. You can check here.

Thank you :D

Collapse
lyrod profile image
Lyrod

Chakra is tree shakable, hopefully! 😄