Custom web apps with Chakra UI – fast and accessible

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 styled-components (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 WebAIM’s 2022 report, 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 WAI-ARIA standards. 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: “Atomic Design – from nature to User Interface.”

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 reduced cost of software development. 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 CRM, 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.