Tech Hot Takes: Chakra UI Review
A simple, fast, and complete UI library
What is Chakra UI?
“ Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.”
In layman’s terms, Chakra UI is an all-in-one UI library made for React. It allows developers to quickly build a production-ready React application while keeping it accessible, themeable, and composable. The library was heavily inspired by Theme UI and follows the System UI specifications. Also, shout out to all the anime fans out there — Chakra UI was actually named after the popular anime Naruto 😆.
Features
Chakra UI comes with a plethora of features to make the library customizable, scalable, and easily accessible. Here are some that stood out to me:
Themes
Light and dark themes gained a lot of popular traction recently and it hasn't gone unnoticed. Chakra UI has a default theme consisting of a modern color palette with 9 different variants in each color. As someone who struggles with frontend creativity and the paradox of choice, it saves me hours of looking for inspiration on the app’s color theme. For someone who is confident in their taste in UI, the library allows you to fully customize multiple versions of themes. You can switch to any set themes by using the provided hook. This feature makes theme updates smooth like butter (any BTS army out here?).
Hot Tip: Themera is a great tool to generate exportable color presets for Chakra UI.
Style Props
Props are the main way to pass or bubble functions or values in React. Chakra UI components enabled the ability to pass style props to them as a shorthand to creating styled-components. Furthermore, Chakra UI made sure to abbreviate the prop names so they don’t clutter your code. But - they also kept the more verbose option for developers who prefer to be more explicit. This feature works really well with VSCode IntelliSense, which in turn significantly speeds up my development.
For developers who initially migrate to Chakra UI, it may be easier to utilize the sxprop, which takes in pure CSS. The sx and __css props are often good for responsive styling, but style props can also take in an array of values for different style breakpoints.
Hot Tip: prop priority is sx > style props > __css
CSS Variables
CSS variable may feel like a must-have in a modern UI library. However, I still want to give them their rightful credit for including it. Developers can use CSS variables directly in style props and use the syntax var(--chakra-path-name) in any other style, inputs to easily access the stored style.
RTL Support
Since Chakra UI is based on Emotion, you can use a similar mechanism to set up RTL (right-to-left) support. This can help globalize your application and present a more visually appropriate experience.
Components
This is single-handedly by far my favorite part about Chakra UI. The library provides a myriad of components, varying from layout components (e.g. Container, Flex, Box, etc) to overlay components (e.g. Menu, Modal, Tooltip, etc). I haven’t had a use case to design any buttons or text blocks yet. Each component has its own style props and is fully customizable with the sx prop to your desire. The components also integrate well with Chakra themes as well as built-in accessibility support. I’ve explored many component libraries such as Material UI, and Theme UI, and I haven’t found one that’s as complete and developer-friendly as Chakra UI components.
Chakra Factory
Similar to using other UI libraries, developers will eventually adapt and become fluent with Chakra UI style props. In the rare case that Chakra UI doesn’t include a component template for you to work with, or if you like to use an existing React component in your code, it would be inconvenient to work with different styling syntax. Chakra UI thought about and created this wrapper called Chakra Factory. This allows developers to forward Chakra UI style props into whatever component that’s wrapped within the factory. This takes customizability to a whole ‘another level.
Hooks
Chakra UI does not only excel in UI-related features, but it also provides many hooks to polish browser interactions. My favorite is useClipboard, which is a custom hook that handles copying content to the clipboard. This is a must-have in a documentation site and a great addition to any modern sites.
My Hot Take
I’m not someone who ordinarily raves about CSS, in fact, I would avoid it if at all possible. However, Chakra UI made frontend development profoundly more enjoyable by making the headache-inducing and tedious parts of styling comprehensible and efficient. And as a bonus, the community is also fun and helpful! They even have their own Discord server where users actively help one another and proudly display and share their work. So far I haven’t run into any issues using Chakra UI and it has opened my eyes to how uncomplicated and satisfying styling a website can be when executed right.
Features: 10/10 🚀
Documentation: 9/10 🔥
Developer Experience: 9/10 👨🏻💻
Community: 8/10🕺🏻
More content at plainenglish.io
