Chakra UI Experience

I've been utilizing Chakra UI on several projects both personal and org level large projects. So, whatever I'll be sharing is based on my experience :). Feel free to comment and let me know what are your experiences with Chakra UI.

Introduction

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

In an application, one often needs various components ranging from a text input box to a modal, popover etc. Chakra UI comes pre-bundled with generic components. So, it takes away the pain of creating your component library.

Chakra UI offers style props to modify the styling. Components come with default styling. One doesn't have to start styling from scratch. The prop names are intuitive and easily memorable. Prop names are shorthand-like for padding, it's just "p". What you use for CSS properties, remains the same here as well. To centre a text, simply pass "textAlign='center'" as a prop.

Awesome features

• General purpose components - All general components are available. One can create complex reusable components as per requirement easily.

• The default styling of components - All components come pre-styled by default. No need to start from scratch.

• Responsive components - On top of generic components, you also get responsiveness handled out of the box. No need to write custom media queries to handle them specifically.

• Colour Mode - It offers a theming feature to implement dark and light modes seamlessly. Most of the colours are dark mode compatible. If you need some specific colour toggling, you can always use useColorMode and useColorModeValue hooks.

• Theming - You can have a file theme.js to define your application's colour palette, type scale, font stacks, breakpoints, border radius values, and more. Theming is based on Styled system theme specification

• Integration with third-party libraries - Chakra UI components integrate easily with any third-party libraries. I've tried it with React Hook Form, Framer Motion, Formik, React Select etc. There can be overhead to understanding what props to pass to achieve the desired requirements.

Pain Points

• Default styles are not always needed - I mentioned default styling as a feature I greatly admire. But as the saying goes, what benefits most has also a high cost to pay in return. In product development, there is a need for various styling. Chakra UI has a specific set of variants available for each component like a ghost, outline etc for the button component. To create custom components, you can either override the default styling of variants or create your own components utilising the generic components. Else, you'll be left with passing all styling props to each component where it's used. In Chakra, since style args are also passed as props, the passed props list becomes very large. It can look very ugly for code readability.

• Struggle to match component style to design while being super fast in development - Working with Chakra means you have to tie your design to the Chakra UI components. Chakra UI components are built to achieve rapid development. This can be achieved only if you directly utilize the components. If you go on styling each component, you'll soon realize that you are required to create different components on top with different styles. A lot to manage, huh?

• Specialized components are not available - In Chakra UI, components are very generic. For example, the input component is available. But the select component is absent. You either develop your select component (remember, you'll need to handle all functionalities, accessibility etc yourself), or depend on some third-party library like React Select and apply the styling to match it to the native Chakra UI component. While building any dashboard application, one requires complex components like a dropdown menu, navigation menu, date picker, etc. These are not available.

• Restrictive open source license - Chakra UI offers a pro version which contains more components. Chakra Pro offers components created by using basic components. Pro is centred around super-sonic development as it has some blocks/views already available (form layouts, paginator, lists, etc). But there is a catch. Chakra Pro can't be used in any project which can be open source. I mean, see one doesn't know if their product can be open source or not from the very beginning. I think, we all start by creating products to tackle a specific requirement, but when the requirement is global based, we convert it open source. So, I think, that Chakra Pro is very limited in that sense.

My Opinion

Finally, my opinion - SAAS products often have needs for component layouts as per its in-house design which are created using basic components. If we consider Chakra Pro, we would have to stick to their component designs to facilitate faster development else we will be creating components using their free components. Then, Chakra Pro doesn’t hold any value. So, IMO, Chakra Pro isn’t worth it in the long run.