Reasons why I love using Chakra UI for React
Tags: react, webdev
Published: 2020-08-23 09:16:46

Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.

Chakra is most definitely the most fun I have had while working on a React project. Building UI with it is fast and easy. Here I will list reasons why I think that you should consider Chakra UI for your next project

## 1. Easily Themeable

Customising Chakra and making it look like the design that is handed to you by a designer is easy. As easy as creating a `theme.js` files and passing it a json object.

```javascript
// example theme.js
import { theme } from "@chakra-ui/core";

// Let's say you want to add custom colors
const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
};
```

You can also use customise fonts and font sizes

```javascript
// example theme.js
export default {
  fonts: {
    heading: '"Avenir Next", sans-serif',
    body: "system-ui, sans-serif",
    mono: "Menlo, monospace",
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "4rem",
  },
};
```

You can also customise the breakpoints

```javascript
// example theme.js
export default {
  breakpoints: ["30em", "48em", "62em", "80em"],
};
```

Checkout the docs for more customisation options

## 2. Dark mode is inbuilt

> Most of Chakra's component are dark mode compatible. Use the `useColorMode` hook in your application to change the color mode. This value will be stored in `localStorage` and used whenever the page is loaded.

All you need to do is wrap your root component with a provider

```javascript
import React from "react";
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
import customTheme from "./theme";

function TurnOnColorMode({ children }) {
  return (
    <ThemeProvider theme={customTheme}>
      <ColorModeProvider>{children}</ColorModeProvider>
    </ThemeProvider>
  );
}
```

## 3. Responsive (mobile first) design without tedious media queries and ease of styling

> Chakra UI support responsive styles out of the box. Instead of manually adding `@media` queries and adding nested styles throughout your code, Chakra UI allows you provide array values to add mobile-first responsive styles.

Chakra is mobile first and so it stays performant on mobile devices as well

```javascript
<>
  <Box
    height="40px"
    bg="teal.400"
    width={[
      "100%", // base
      "50%", // 480px upwards
      "25%", // 768px upwards
      "15%", // 992px upwards
    ]}
  />
  {/* responsive font size */}
  <Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
  {/* responsive margin */}
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
  {/* responsive padding */}
  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</>
```

This responsive design works on every style prop in the theme specification. You can change the style of properties at given breakpoints

Chakra UI contains a set of layout components like `Box` and `Stack` that make it easy to style your components by passing props. [Learn more](https://chakra-ui.com/style-props)

## 4. A large gallery of components at a small size cost

Chakra ships with 49 components and 3 utility hooks. All this at 101.2kB when mified and gzipped. Checkout the whole report at [BundlePhobia](https://bundlephobia.com/result?p=@chakra-ui/core@0.8.0)

## 5. Accessible

Chakra UI components follows the WAI-ARIA guidelines specifications and have the right `aria-*` attributes.

## Looking for documentation?

Head over here => https://chakra-ui.com