Chakra UI
Published: 2022-01-18 01:36:15

Chakra UI is a modular UI component for React apps. Building a website using this library is making devs lives much easier. [To learn more](https://chakra-ui.com/docs/getting-started)

Chakra is growing quickly:

 
![Image of chakra numbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voz5iwe2rabzq6fy740e.png)



**Installation:**

`npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5`

or

`yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5`

After installation is time to set up, I'm using NextJs that's why my setup is MyApp, the `ChakraProvider` should be around your main project.   


```
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react';
import { theme } from '../styles/theme';
import "focus-visible/dist/focus-visible"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp
```


By improving your code you can create a Theme. Create a file `Theme.ts `then you can customize the colours, fonts, size, etc... 

![theme.ts file example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/913ixuwzzif95n0fyt2c.png)

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

export const theme = extendTheme ({
  colors: {
    gray: {
      "dark": "#343a40",
      "light": "#6c757d"
    },
    white:{
      "light" : "#FFF",
      "dark" : "#f8f9fa"
    }
  },
  fonts: {
    heading: 'Roboto',
    body: 'Roboto'
  }, 
})
```

In case you don't want to create your theme, Chakra UI provides a [default theme ](https://chakra-ui.com/docs/theming/theme) 


**Forms**

As I said before this library makes your life easier, there are plenty of forms that you can simples use, such as Button, CheckBox, Input, Text Area. Even though all components come with default styles, you can customise the styles depending on your project.

import { Button, ButtonGroup } from '@chakra-ui/react'``

![button component example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8sf9w1z1a1ime3t54li.png)

I want to talk more about Stack one of the components that I use a lot.

Stack is used to adding spacing between elements in the horizontal or vertical direction. It supports responsive values.


![Stack example using responsive direction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87e783skxtqx4cuydn9l.png)


**Responsive layout:**

Let's talk about responsive layouts, one decade ago we didn't think about responsive websites, because most people used their laptops to access the website, however, it is not our reality anymore, a website needs to have the same layout whether it's opened by laptop or mobile. That's why is so important to have a responsive layout. Chakra components you can set up how you want that specific component behaviour.

_example:_ 


![Responsive layout example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6moyrhb5yid7zs1s5caw.png)

To set up a component using responsive between brackets the first (left) element is the mobile version and the second (right) element is the web version. In this example, in the mobile version, the box will be in a column and web version the box will be in a row.  


**Color Mode:**

Dark or light mode is not so complicated as you thought. Most of Chakra UI components are compatible with dark mode. You can change the color mode by using the `useColorMode` hook.


![color mode example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/037e5jkcn08n3n1zstkd.png)


![example using nextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv1p6iof37ez7xlhosb8.png)


**Conclusion:**

Chakra UI is a fantastic library, works well with NextJS. The documentation is easy to understand and the community is growing so fast by the time we will have more articles about this library.

#ReactJS #NextJS #ChakraUI