# Why you should use Chakra UI ⚡️ ?

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.

```plaintext
// 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
```

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

```javascript

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

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

export default MyApp;
```

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

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

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

> Note: For better sight, you can check the [official documentation](https://chakra-ui.com/docs/getting-started), 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.
    

```javascript
import { extendTheme } from '@chakra-ui/react'

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

export default customtheme
```

* *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](https://cdn.hashnode.com/res/hashnode/image/upload/v1688718727869/d986f3ad-4a16-4a02-a2ff-afc3b95d6b4c.gif align="center")

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

```javascript
import { createBreakpoints } from "@chakra-ui/theme-tools"

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

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

```javascript
<Box width={{sm: '200px', md: '400px', xl: '600px'}}>
  Me, fully responsive :)
</Box>
```

### Preview 👀:

I built a simple project or you can say just a [landing page](https://chakra-ui-next-js.vercel.app/) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1688718730769/e405fb28-670b-4a4a-840c-e6fb3387735c.png align="center")

> 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](https://chakra-ui.com/docs/getting-started).

## 📍 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](https://twitter.com/Adyasha8105)💙.