8 Reasons Why I Love Chakra-UI

In this blog, I will tell you 8 reasons why I love Chakra-UI.

Now, why would you want to use a UI framework instead of custom CSS styling?

The reason might be:

• You are not good at CSS or you don’t like it.
• CSS from scratch is too much work.
• You are in a hurry.
• You are terrible at design and so on…

Video Tutorial

Now after reading the blog, you can watch the video tutorial below if you want to get started with chakra-UI.

Reasons

• Easy to get started: Chakra-UI is easy to get started. Just install the package and start coding. Here’s how to start with nextjs and chakra-UI.

yarn create next-app <my-app>
cd <my-app>
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Then in the _app.js file:

import { ChakraProvider } from '@chakra-ui/react'
function MyApp({ Component, pageProps }) {
    return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    )
}
export default MyApp

You can see it is very easy to get started with Chakra-UI and nextjs. In other frameworks like Material-UI, you have to do some extra setup for nextjs.

• Beautiful design: Chakra-UI has a very beautiful design. It is simple and doesn’t have any unnecessary animation and things like that. Good for eyes.

• Theme: Chakra-UI has a beautiful and useful theme. A
  theme is just a collection of predefined styles like colors, typography, etc. You can easily create your theme and use it. Watch the theme from here
• Style Props: With Style Props, you can use almost any CSS property as props. There are also a huge amount of shorthand properties that will make you work super easy
• Easily and very Customizable: Chakra-UI is very customizable. You can easily customize it to your liking. You can override the whole theme. Add custom layer styles that can be used in any component.
• Chakra Factory Function: It has a factory function that allows you to make any Html element to the Chakra component. In that component, you can pass all the valid chakra-ui props.
• Built-in hooks: Chakra-UI has a bunch of useful hooks that will make your work super easy. For example, useDiscloure hooks are really useful when you want to create some kind of toggle mode like side navigation.
• Integration with other libraries: You can easily integrate Chakra-UI with other libraries like framer-motion, and storybook.

So, these are the reasons why I love Chakra-UI.

That’s it for today. Stay safe and be happy.