4 reasons to use Chakra UI in your next project

Mateusz Wójcik

Jan 19, 20214 min read

4 reasons to use Chakra UI in your next project

Table of Content

  • What is Chakra UI?

  • The advantages of Chakra UI

    • Easily customizable

    • Dark mode support

    • Easy RWD

    • Accessible

  • Conclusion

What is Chakra UI?

ChakraUI’s homepage states that it's a simple, modular, and accessible component library to let you build React apps with speed. After delivering a few projects where we used Chakra, I can agree with this description. Building UIs never was so fast and convenient.

You may already be familiar with libraries such as MaterialUI, Ant Design, or React Bootstrap. And you may be wondering why you need another UI library when you already have a big, battle-tested group of options to choose from. Well, Chakra stands out mainly because of its great built-ins, accessibility, and high customization.

The advantages of Chakra UI

Easily customizable

One of the most significant advantages of ChakraUI is that you can easily adjust it to your design needs. Usually, you start with your custom theme to specify things like colors, font sizes, breakpoints for responsive design, shadows, and many more! That alone gives you a lot of flexibility when creating advanced UIs, but that's not all.

Each component you use accepts a lot of different props which you can use to style it. 

For example, let's take a look at a simple usage of the `<Button>` component in Chakra UI:

 ```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>

Using this bit of code, Chakra will render a button with styles provided in the theme. 

But now, let's use a few props to change its style: 

```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>

In this piece of code, we change the button’s color scheme to use a red color palette, and modify its variant to have a solid background. We also resize the button to medium and set isLoading to false.

Let's see. First, we change the button’s color scheme so that it will use a teal color palette. Next, we change its variant, so instead of the whole background, we only have a border. Then we make the entire button bigger. Besides styles, we can change the behavior of the button. When “isLoading” value is true, we hide the icon and display a loader that takes a few props. Both the icon and the loader are part of ChakraUI too!

If you ever used TailwindCSS, which is gaining popularity lately or Styled System, you may see some similarities. Tailwind is a set of CSS classes that you can use to compose components. On the other hand, Styled System and Chakra give you the whole component, but you can change particular styles using props. All of these solutions have a lot of fans and opponents. The latter mentions a big disadvantage: the code may lose readability due to many classes/props. Of course, it may be an issue, so it's essential to keep our components concise.

Dark mode support

The dark mode is becoming an integral part of our tech lives. We can use it on our smartphones, laptops, and of course websites. Although not every project would require you to implement dark mode, it's great that Chakra can simplify the process. By default, most of Chakra's components are dark mode compatible. You just need a little bit of config, and you are good to go! There is also the possibility of using system color mode, so if a user sets dark mode as default for their device, your website will automatically pick it up.

Easy RWD

ChakraUI supports responsive styles out of the box. You don't have to add media queries manually, ChakraUI provides object and array values to add responsive styles. It's worth noting that it uses “@media(min-width)” to ensure a mobile-first approach.

You can define your own breakpoints in theme config, or you can use default ones. 

Let's take a look at how the implementation of responsiveness looks in a basic `<Text>` component: 

```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>

Using the above snippet “<Text>” will have “24px” and be centered on all of the breakpoints. 

Instead of a single value, we pass an array of values. Chakra will take “24px” from the “fontSize” prop and “center” from “textAlign” and use it for screen sizes between 0 and 30em (these are the default values in the theme config). Then notice “null” passed in:  we don't want to change styles in the range from 30em to 48em (again, default breakpoints) so we pass null to avoid generating unnecessary CSS. In the last indexes of the arrays, we assign “56px” and “left” so our text will have this style for every screen size bigger than 48em.

Personally, I'm not a massive fan of this array notation. It makes it harder to find out which styles are applied to each breakpoint. 

Fortunately, we can use the object syntax: 

```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>

The syntax looks different, but the behavior stays the same.


We can not stress enough the importance of accessibility. A considerable percentage of people experiences some kind of disability, so it's crucial to create accessible UIs. We usually have to implement a few WCAG guidelines, but luckily things like proper outlines and keyboard navigation are covered by Chakra. Of course, that's not all, and we still need to remember things like hierarchical heading structure or alts for images.

BONUS: Lately, ChakraUI added support for RTL languages. From now on, it's much easier to create components that should cover both RTL and LTR languages.


As you can see, ChakraUI proves to be modular and accessible. On top of that, it's also really small (375kB minified, 101kB minified, and gzipped, although you should remember that besides the core Chakra library you have to install Emotion). From my experience, it's one of the best component libraries for React!

If you’d like to know more about component libraries, or which one is best for your project, we’ll be happy to hear from you. Write to us at

Don't miss a beat - subscribe to our newsletter
I agree to receive marketing communication from Startup House. Click for the details

Published on January 19, 2021


Mateusz Wójcik JavaScript Developer

You may also highlightlike...

14 accessibility hacks to make your users’ day better
AccessibilityUX designFront-end development

14 accessibility hacks to make your users’ day better

Accessibility in app development is often overlooked, but it plays a vital role in ensuring inclusivity and improving user experience for individuals with disabilities. With approximately one billion people worldwide experiencing some form of disability, it's crucial to consider accessibility as a necessary aspect of app design and development. By incorporating accessibility features from the beginning, you not only cater to a significant user base but also create a more user-friendly and inclusive app for everyone.

Maciek Kozłowski

Dec 02, 20197 min read

Exploring the Current Version of React: Features, Upgrades, and Documentation
ReactDigital products

Exploring the Current Version of React: Features, Upgrades, and Documentation

React, the popular JavaScript library for building user interfaces, continues to evolve with each new version, introducing exciting features and improvements.

Marek Majdak

Jun 01, 20235 min read

Why do we love using Gatsby and Strapi for building websites?
Next.jsStrapiFront-end development

Why do we love using Gatsby and Strapi for building websites?

Static site generators (SSGs) and headless content management systems (CMSs) have gained popularity for creating fast, performant, and easily editable websites. By combining the power of Gatsby, a React-based static site generator, with Strapi, a flexible headless CMS built with Node.js, developers can create blazing fast websites that offer seamless content management. This article explores the concept of static sites, the role of CMSs, and how Gatsby and Strapi work together to deliver swift, customizable, and user-friendly web experiences.

Mateusz Wójcik

Feb 21, 20205 min read

Let's talk
let's talk

Let's build

something together


We highlightbuild startups from scratch.

Startup Development House sp. z o.o.

Aleje Jerozolimskie 81

Warsaw, 02-001

VAT-ID: PL5213739631

KRS: 0000624654

REGON: 364787848

Contact us

Follow us


Copyright © 2023 Startup Development House sp. z o.o.

EU ProjectsPrivacy policy