Why would I need to build my own React UI Component library?

There is a large amount of free react ui-component libraries available at npm. These libraries can be really useful when developing a web application if we don’t need (or don’t want) to spend a lot of time setting up the styles and behavior for UI components such as buttons, tabs, select controls (dropdown menus, checkboxes), dialogs…

But there are some times when you need to customize components with specific behaviors, and you notice that you need to override way too many styles and functions and start opening issues asking for features for specific use cases for your application. That’s when you may start thinking about making your own reusable ui components inside your application, which can have exactly the behavior you need based on different props passed to them.

But the problem won’t end there. Most companies have multiple projects that usually need to follow the same design guidelines. Imagine how tedious would be if you had to build the same components over and over for every new application the company needs. If you instead build an npm library (either public or private) with every common ui component, you would just need to install it on each project and start using it. As simple as that.

Even if you don’t need to share components between applications, you may want to consider building an ui component library due to many other benefits. To begin with, this project is built for only ui components (that is, “atoms” and some “molecules” according to the atomic design), so it can be developed completely independently from the main project, maintaining its own versioning, with can be upgraded (or downgraded) in your main project whenever you find it necessary.

On the other hand, dependencies strictly related to interfaces don't need to be included directly in your main project, if at some point you want to change some core ui dependency or implement your own solution, it can be almost a transparent change to the main project where the library is installed. Also, styling solutions can differ from the ones being used in the main project.