Why I am building yet another component library

The journey leading to dorai-ui

Photo by Jan Huber on Unsplash

After working as a front-end developer for some years, using different component libraries, and working on several from scratch, I have come to experience specific pain points and how I have finally approached to solve them.

1. Most component libraries are styled. A styled library might not sound like an issue since we have almost a component library for every kind of styling system out there, ranging from style components to class props and much more. The problem arises when you want other functionalities, for example. Your team decided to use styled-components with a library system without a modal component. The most functional modal library you know uses SASS or relies heavily on a utility-first library; you either proceed and have many other types of styling systems you never planned to support or choose to build your own.
2. Components are not always accessible. Building a component library is complex; supporting accessibility is a challenging task, and developers have overlooked this, leading to many broken, inaccessible component systems out there. I must say, I have been guilty of this in the past. I must praise many component libraries out there moving towards accessibility now or built with this in mind But what if our team finds that library with our features in mind but is not accessible? We might choose to create a component library ourselves then.
3. Maintaining a component library takes time and might be more challenging than you imagine. I am well experienced in react and have seen several sides to a react project. A typical pattern is a component folder that holds all of our components. As the project grows, there is a tendency to have repeated components, poor documentation, and a bottleneck navigating around the project building blocks (components).
4. Endless props. Some component libraries have a prop for controlling almost every component aspect. The lack of patterns that gives control to the user makes it difficult for us to navigate around and adds a learning curve to the usage of such a library.

I was frustrated by this many times, and I have seen this exist over the years and on new component libraries coming out.

Finally, I decided to build an open-source library to demonstrate how I attempted to solve these issues, DORAI UI.

The approach was simple, an unstyled, accessible, open-sourced component library that can serve as the base for your design system.

Please do use, report bugs, and also star! 🤩. More components are coming.

An all-in-one installation of the available components can be found here or all the individual components here.

You can find the GitHub project here.

N.B: I am also making an effort towards a well-structured documentation site.