Reasons why I love using Chakra UI for React

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.

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

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

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

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

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

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

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

Comments

[H-Nguyenx]

Do you know where to put the theme.js file in a react or nextjs project?