Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

Chakra UI follows the minimalistic and modular approach, so you don’t need to waste time undoing and overriding CSS classes and default configurations.

Features

• The main feature of Chakra UI is the ease of styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props.

• Flexible & composable: Chakra UI components are built on top of a React UI Primitive for endless composability.

• Dark Mode: Most Chakra UI components are dark mode compatible, which makes it easier to change themes.

All component styles can be overridden or extended via style props to reduce the use of css prop or styled().

Installation

Installation includes adding a few peer dependencies, and we will also set up our react app using the following lines of code:

1$ npx create-react-app chakra-app
2$ npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

And when you look into your package.json file, you should see this:

Setup

Before we can use Chakra UI, we need to wrap our app in a ThemeProvider, which establishes all of our components' default styles. Also, we will import CSSReset and invoke it, which will remove all browser default styles.

1import { ThemeProvider, CSSReset } from "@chakra-ui/core";
2
3const ThemedApp = () => <ThemeProvider> <App /> </ThemeProvider>;
4
5ReactDOM.render(<ThemedApp />, document.getElementById('root'));

So the full index.js file looks something like this:

Customizing

Chakra UI comes with a default theme, but you can extend it and add your custom colors, fonts, and everything you want. You can make a theme.js file and export your Custom Theme:

And then, you can import it into your index.js file and apply it as a theme property.

Using components

Using components with Chakra UI is very easy. You need to import them by name from @chakra-ui/core package:

1import { Button } from "@chakra-ui/core";

All of the components can be found in the sidebar on the official Chakra UI page.

Style Props

Style props are used to apply styles to a component just by passing props to it, making it a lot faster and easier to make some great-looking apps.

Many props can be passed to components, but the documentation is evident and easy to understand.

Color Mode

Another great thing about Chakra UI is that most of its components are compatible with dark mode. We can change the color mode by using useColorMode hook.

To enable Color mode, first, we need to wrap our app in a ColorModeProvider:

And now, we can use the hook useColorMode within our application. Here is a full code that you can try:

1import React from "react";
2import { Button, Box, useColorMode } from "@chakra-ui/core";
3
4function App() {
5  const { colorMode, toggleColorMode } = useColorMode();
6
7  return (
8    <div className="App">
9      <Box w="300px" bg={colorMode === "light" ? "gray.200" : "gray.600"}>
10        <Button
11          onClick={toggleColorMode}
12          m={20}
13          color={colorMode === "light" ? "gray.600" : "gray.200"}
14        >
15          Toggle {colorMode === "light" ? "Dark" : "Light"}
16        </Button>
17      </Box>
18    </div>
19  );
20}
21
22export default App;

Or we can do it using a more elegant way:

1function App() {
2  const { colorMode, toggleColorMode } = useColorMode();
3  const bgColor = { ligth: "gray.200", dark: "gray.600" };
4  const color = { light: "gray.600", dark: "gray.200" };
5
6  return (
7    <div className="App">
8      <Box w="300px" bg={bgColor[colorMode]}>
9        <Button onClick={toggleColorMode} m={20} color={color[colorMode]}>
10          Toggle {colorMode === "light" ? "Dark" : "Light"}
11        </Button>
12      </Box>
13    </div>
14  );
15}

This feature gives us the possibility to switch between light and dark mode, and as you can see, styling components are elementary.

Responsive Styles

Chakra UI supports responsive styles out of the box. Instead of manually adding @media queries and adding nested styles throughout your code, Chakra UI allows you to provide array values to add mobile-first responsive styles. You can try this code sample to see how it works:

1<>
2  <Box
3    height="40px"
4    bg="teal.400"
5    width={[
6      "100%", // base
7      "50%", // 480px upwards
8      "25%", // 768px upwards
9      "15%", // 992px upwards
10    ]}
11  />
12  {/* responsive font size */}
13  <Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
14  {/* responsive margin */}
15  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
16  {/* responsive padding */}
17  <Box bg="papayawhip" p={[2, 4, 6, 8]}>
18    Padding
19  </Box>
20</>

Here is another good example in which you can see some different props and their functionalities:

1<Box p={4} display={{ md: "flex" }}>
2      <Box flexShrink="0">
3        <Image
4          rounded="lg"
5          width={{ md: 40 }}
6          src="https://bit.ly/2jYM25F"
7          alt="Woman paying for a purchase"
8        />
9      </Box>
10      <Box mt={{ base: 4, md: 0 }} ml={{ md: 6 }}>
11        <Text
12          fontWeight="bold"
13          textTransform="uppercase"
14          fontSize="sm"
15          letterSpacing="wide"
16          color="teal.600"
17        >
18          Marketing
19        </Text>
20        <Link
21          mt={1}
22          display="block"
23          fontSize="lg"
24          lineHeight="normal"
25          fontWeight="semibold"
26          href="#"
27        >
28          Finding customers for your new business
29        </Link>
30        <Text mt={2} color="gray.500">
31          Getting a new business off the ground is a lot of hard work. Here are
32          five ideas you can use to find your first customers.
33        </Text>
34      </Box>
35    </Box>

Themes

Theme object allows us to define our application’s color palette, type scale, font stacks, breakpoints, border-radius values, etc.

You can find very detailed and good documentation about themes on the official Chakra UI page.

Conclusion

Chakra UI has lots of useful components that are very easy to style and gives us the possibility to make our page responsive without using media queries. It might look a little bit confusing initially, but after one or two projects with Chakra UI, you will catch with most of its features that are provided.

I would also recommend watching this short playlist and coding as it goes.