A few weeks ago I completed a great tutorial: This time it was Build a Modern User Interface with Chakra UI. Keeping with the J-school technique for outlining a story, the best way to relate what I learned about Chakra UI is by answering the questions Who, What, Where, When, and Why. Or, in more logical order: What, Who, Why, Where, and When.

What

Chakra UI is a "simple, modular and accessible component library that gives you the building blocks you need to build your React applications." "Simple" in that it provides a great developer experience. "Modular", meaning the components are independent, self-contained units that can be put together to construct a more complex system.

Who

Chakra UI was created by Segun Adebayo, a UX engineer, and is maintained by a team of 12 core engineers. The library, and tutorial, are for established React developers. So as long as you know how to build a to-do app in React, you'll learn a lot. You'll benefit even more if you've used libraries like Bootstrap or Material UI as the syntax is similar, although Chakra is more powerful.

Why

Why learn Chakra UI? For starters, it's used in many projects and the skills are in demand. 488,000 downloads per month, 22,300 Github stars, and 2,900 Discord members. It's so popular because it includes accesibility features for free, it's very themeable, you can compose new components easily, and the cherry on top: there's a light/dark mode feature. So basically you're getting a more powerful styling library that involves a little more work up front with less work and better developer experience later.

If you're working in an enterprise org, you might find Chakra UI Pro worthwhile; It's a premium version of the library with more advanced components like Auth, Banner, and Product Details.

Where

Chakra UI is used in web dev projects by individual developers, small businesses, and enterprise orgs like Shogun, Bonton, and LUGGit.

When

Use Chakra UI whenever you have a branded theme or design system provided. It keeps your fonts, colors, margins, padding, etc. in one place and easily applied universally.

Summary

That's Chakra UI from every angle. Chakra UI is a powerful library allowing you to consistently theme and even create themed components. It's well-covered by developers and becoming rapidly-accepted by the industry. Here's the recommended tutorial again for anyone wanting to learn.