Installing and Using Chakra UI with React

Compared to other React UI libraries like React Bootstrap, Material UI, etc., Chakra UI gives you much more power to style and customize components.

If you are a fan of Tailwind CSS, you will love Chakra UI since it follows the same minimalistic and modular approach as Tailwind CSS.

In this guide, we will discuss how to install, import, and use components from Chakra UI. We will use Chakra UI version 0.8 since version 1.0 is yet to be released officially.

To install chakra-ui, run the following command in your project's root directory.

Chakra UI uses Emotion for handling component styles. As you can see, you have to install peer dependencies yourself as they do not come with chakra-ui by default.

Next, wrap your React app in a ThemeProvider. Modify your index.js like this.

In this section, we will import the Box component from chakra-ui.

One of the coolest features of chakra-ui is that you can use shorthand for props. For example, instead of width, you can use w, which will work the same.

First, import Box from chakra-ui in App.js and use it inside the App() function.

In the above code, w and h are shorthand for width and height respectively.

Here is how this will look.

The Box component in the above example doesn't look like a box, just some text in some corner of the app. Add some background color using bg shorthand prop.

Here is how this will look.

You can now differentiate the 400x400 box from the background. Next, style the text and horizontally align it in the center of the box.

You passed color, textAlign, fontSize and fontFamily prop to style the text inside the box. Here 1rem is equal to 16px.

Here is how this will look.

Now, add a border to the box using the border prop.

Here rounded is shorthand for border-radius, and boxSahdow is shorthand for box-shadow. You have used md as the value of boxShadow prop, which is equivalent to 16px.

Here is how this will look.

To add some margin and padding, use the shorthand prop p and m. You can also use px and py where px sets the padding for left and right. Similarly, py sets it for top and bottom.

Also, change the text Hello World! to Lorem Ipsum.

As you can see, the text is overflowing the Box component; you can fix this by passing overflow="hidden" prop to Box.

Here is how this will look.

isTruncated is another cool prop you can pass to truncate long texts.

Here is how this will look.

In this section, you will add an image to the Box component in the above example. For this, you will use the Image and Text components.

Import Image and Text in your App.js.

Now add these components inside the Box component.

Here is how this will look.

What if there are multiple boxes one after another?

Copy and paste this box multiple times.

Here is how this will look.

You can make the layout of this card system responsive by using the SimpleGrid component. First, import the SimpleGrid component in your App.js.

Now wrap all the Box components inside this SimpleGrid component.

Pass the minChildWidth prop to this SimpleGrid component, which will adjust the arrangement of the boxes according to minChildWidth.

Here the boxes are of 400x400px dimension, so you can pass 410px as minChildWidth.

Here is how this will look.

There is still so much more that you can do to customize and style components in Chakra UI.

In this guide, we discussed how to install chakra-ui in a React app. We also covered how to import and customize different components from chakra-ui.

Chakra UI is the perfect choice for your React app when you want to customize components and want your app to have a unique look, which is difficult to achieve in other React UI libraries like React Bootstrap, Material UI, etc.

Here are some additional resources that can be helpful.

Happy coding!