This page looks best with JavaScript enabled

Chakra UI: React library built for speed

 ·  ☕ 3 min read  ·  ✍️ Iskander Samatov

Chakra UI


Although some people oppose using UI libraries and prefer building their components from scratch, I think they are still worth using because of the speed advantage. The trick then is to find the right one and Chakra UI is a great option.

Chakra UI is gaining traction in React community. At the time of writing, the library has around 15.2K Github stars and 1.2K forks. If you are a fan of emoticon and styled-system then adopting Chakra is a no brainer – the library is built using those technologies as the foundation. 

This list will be in the form of pros and cons. Let’s start with the pros.

PROS

#1 Development speed

Library provides you with the tools for writing and styling components quickly. The main reason behind it is its utility-styled props. Utility-styled props put the “rapid” in rapid prototyping. Here’s an example of styling a Box component:

chakra ui react
Box with utility styled props

Chakra UI has different convenience components you can use for frequent styling tasks. How many times did you have to write custom CSS to center elements in a div? Well, you could use the Center component instead. 

The library also provides a few useful hooks, such as the “useDisclosure” hook. This hook allows you to reuse the logic for managing popups and modals in your project.

#2 Component Factory

Chakra UI provides a flexible way of building styled-components.

Using the library’s factory function, you can assemble the components like lego pieces. The created components are loosely coupled with their building blocks. As a result, your component system will remain highly modular.

chakra-ui-factory
factory utility

#3 Built with Typescript

The Web development community has embraced Typescript, and for a good reason. There are numerous advantages of using TypeScript that you can find on the Web. Here’s a good article on that topic from Digital Ocean.

Chakra UI was built with TypeScript as the foundation. As a result, the library provides full IDE support and type checking.

#4 Focus on a11y

Nowadays, for any production level software, supporting a11y is a must-have. Chakra UI can help you cover a good deal of your a11y concerns since it provides excellent a11y support.

#5 Actively maintained

Last but not least, the maintainers of the library actively ship new features and improvements.

As an example, the useful hooks built into the library came with the second version. It’s a good sign that ChakraUI is keeping up latest trends in React community.

Cons

#1 Some components do not follow theming pattern

One of the components I ran into that doesn’t allow styling based on the variant is Alert. Instead, the look of the Alert changes based on the `status` property. To overcome this issue, I had to apply custom styling properties to the component. 

#2 One maintainer

At the time of writing, Chakra UI seems to have only one fully-committed maintainer. That’s the author of the library Segun Adebayo. When there’s one active maintainer, the risk of discontinuation of the support is higher. But this might not be an issue in the future since more people are getting involved with the library. 

Conclusion

Despite the cons, I encourage you to give Chakra UI a try! The library makes it that much easier and faster to prototype and build React components.

Share on

Software Development Tutorials
WRITTEN BY
Iskander Samatov
The best up-to-date tutorials on web and mobile development.