Building accessible custom apps may be hard and for sure requires a lot of work. So why shouldn’t we use a component library to speed things up?
I’ve done many projects from scratch in my career. We always want to start the development of a project fast to provide our client with a working, clickable version as soon as possible. But it always takes time to get the final designs from a designer. Sometimes it can only be done after rebranding, or after mood boards are selected.
Before I found Chakra UI, I was mostly using (a CSS framework) and had been writing components on my own. I’ve also tried many component libraries, but I would always abandon them after the end of a given project.
So why did I make the switch?
What is Chakra UI
Chakra UI is a component library that allows you to easily build accessible React-based applications using different modules. What makes Chakra UI stand out among other component libraries, is that it was created and optimized for accessibility and responsiveness, it’s extremely flexible and customizable, and yet it’s very easy to use.
Benefits of Chakra UI
But there’s more! Here’s my subjective list of the benefits of Chakra UI and how it could help you.
Accessibility
According to , on average, a website’s home page has 50.8 accessibility errors! Meanwhile, every one in six people in the world is experiencing disability (according to WHO). This shows the scale of possible digital exclusion if accessibility standards aren’t met.
Chakra UI components are accessible in accordance with the . This makes your app available for anyone, regardless of their disability, and ensures your website will be free of accessibility errors.
Atomic Design
What I really enjoy about Chakra is that its components are really small. This enables us to reuse components and compose them together.
This way, we don’t have to worry about redundant code. We can also sure that if we stitch the components together, we won’t lose on quality. But there are many more benefits to following the principles of atomic design, about which you can read in our article: “.”
UI Kit
As I wrote in the beginning, front-end developers often have to wait for the designs to be ready. But that’s not where the collaboration (and, in fact, co-dependency) between the designer and the developer ends.
I like that Chakra provides a Figma UI Kit that contains a style guide and a components library. It speeds up the design and development process, and facilitates collaboration.
Customization
With Chakra UI we can build views based on wireframes and simply apply styles and responsiveness later. Chakra provides us with many basic components which can, with minimal effort, look the way we want them to.
Our clients often need custom designs and are afraid of using ready-made component libraries, even if it could lead to a . Thankfully, Chakra UI is fully customizable, which enables us to speed up the development process. We can start coding the front end while a graphic designer still works on the designs. We focus on developing a clickable working version of an app and then simply apply stylings.
This way, if we want to build a landing page for a client for whom we’ve already developed a , we can simply get the theme from the CRM and apply it to the landing page.
Theming and dark mode
Chakra UI uses Emotion which enables developers to style components inside JavaScript with style props. There is one theme for an entire app, where the colour palette, font sizes, component styles and many others are defined. Chakra provides a default one, but you can simply customize it.
All the components in Chakra are compatible with light and dark mode, so we can implement both with almost no effort.
Responsiveness
Depending on the source, research says mobile accounts for 50 up to 60% of global traffic today. There’s no other way but to develop for mobile as well, though for many it’s still just an afterthought.
Chakra is a mobile-first library and applying responsive styles to the components is easy. You can forget about writing media queries. Simply define (or use default) breakpoints and apply responsive styles through props. Et voilà! Your mobile app is ready.
Integrations
Chakra provides guides for integrations with many frontend framweroks such as: Create React App, Next.js, Gatsby, Vite and Remix.
There are also ready instructions for integrating it with Capsize, Formik, Framer Motion, React Hook Form, React Table or Storybook.
My insights
On top of it all, Chakra UI has quickly growing community and, in my experience, they respond fast to any questions that might arise.
It offers TypeScript support (it was originally build in TypeScript) and its documentation is perfect. It has many examples of basic usage and guides for customization. Chakra renders only necessary components and styles so we don’t end up with a huge DOM when using it.
The learning curve was also really easy, in no small part thanks to intuitive prop types.
Final verdict
Chakra UI – with its accessible, reusable, and small components, as well as good documentation – is a component library worth trying. The great thing about it is that it can be customized easily but even without customization it looks great and it’s accessible. It is very well documented and can be used with multiple front-end frameworks. It speeds up your work, tidies up style themes, and may help you reduce DOM size.
