When to use a UI component library in a React project?

While preparing to kick off a new React project at Sunscrapers, we recently faced a dilemma about whether we should design and build our UI components from scratch or choose one of the popular UI component libraries. 

We had some really interesting discussions on this topic in my team, and I thought that it would be great to gather all those arguments in one place to help you make the decision for your own project.

Read on to find out when a UI component library is a good choice for your project.

What is a UI component library?

A UI component library is a (usually) robust set of ready-made UI components such as buttons, inputs, dialogs, and so on. They serve as building blocks for layouts. Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects. Each library has a distinctive look and feel, but most of them offer theming, and their components are customizable to a certain degree.

Let’s have a look at some examples:

• The classical Bootstrap framework is still going strong with React Bootstrap offering a React integration.

• With over 54k stars on GitHub, Material-UI is one of the the most popular UI component libraries for React. It was created to unify React with Material Design, a visual language developed by Google.

• Ant Design is worth checking as well - it’s a library developed by the Chinese tech giant Alibaba.

• Another popular choice at the time of writing this article is Semantic UI (nearly 11k stars on GitHub), which integrates the popular CSS framework with React.

Benefits of a UI component library  

Libraries are made for one reason – to make developers’ lives easier. UI component libraries are no different in their purpose. 

But there are many more benefits of using such libraries:

• Speed - incorporating a UI component library can have a great impact on development speed. Instead of creating each element from scratch, we simply mix and match the existing components. Even if some additional customization is required, it tends to be much quicker than writing styles on our own.
• Ease of use - components are meant to be easy to use. Established libraries are well-organized and have good documentation that is easy to follow. Very often, it’s enough just to copy and paste code snippets to make it work.
• Attractive look - components look great without requiring any extra effort from the developer; they’re carefully designed by professionals.
• Compatibility – ensuring cross-browser and cross-device compatibility is one of the biggest challenges of frontend development. UI component libraries provide compatibility out of the box, which makes everything so simple!
• Accessibility - good libraries adhere to accessibility guidelines, so developers don’t even need to think about it. 

Using UI component libraries - potential challenges

Even if your use case fits perfectly, there are some things you better keep in mind:

• Generic look - your app’s look and feel will be determined by the library’s style in most parts. This is not necessarily an issue, but you need to make sure that this is acceptable for your project.
• Change of design direction – as mentioned before, it’s very important that designers understand and stick to components offered by the library. If the direction changes towards a custom solution, it will become increasingly difficult and time-consuming to overwrite the initial implementation.
• New team members – every developer and designer needs to be familiar with the particular library and its implementation (though this point is true for any design system and any project).
• Bundle size – UI component libraries tend to be big, so it’s probably not the best idea to engage them in tiny projects.

When to use a UI component library?

The benefits of UI component libraries are undeniable. Does this mean that UI component libraries are always a good idea? Not really. It all depends on the type of project you are working on, as well as some other factors.

In general, UI component libraries are most useful to projects that focus more on functionality rather than the visual aspect of the app. 

Here are a few examples:

• Administration panels – most often, the objective of such “back office” apps is to provide a functional, intuitive interface and not a visually-advanced solution. A UI component library will be a perfect fit here.
• Proofs of concept – component libraries are great for prototyping since they allow building interfaces at great speed. They’re particularly useful if we want to test functionality at the early stage without engaging many resources.
• Projects with no designer – let’s imagine that you’re a developer who has a great idea but not much design knowledge. You can use a library to create elegant layouts and provide a nice user experience easily.
• Projects where clients and designers are on the same page – it’s important that everyone involved in the project is aware of the pros and cons of the chosen solution — deviating from what the library offers will become increasingly difficult further down the road.

Is there an alternative to a UI component library?

If you decide that a component library isn’t a good fit for your project, you’re not left all alone in the dark. You can take advantage of other options that provide a more lightweight or custom alternative.

Here are two types of solutions worth considering:

• Lightweight CSS frameworks such as Tailwind or Pure – they offer a minimal, less opinionated CSS foundation that will help you speed up development, at the same time allowing tremendous flexibility.
• Custom component libraries – if you’re working on a large project that requires a high level of UI customization or you find yourself repeating the same UI patterns across projects, consider creating an internal UI component-sharing platform. Bit is a trending tool. You should definitely check it out.

Conclusion

React is all about components – those bits of code that can be plugged in, plugged out, rearranged and reused, not only within a project but also between different projects. UI component libraries provide us with such reusable, battle-tested components. 

When used correctly in the right type of project, they prove to be a great tool that saves time and ensures the implementation of best practices. But like any other tool, it won’t suit every use case. That’s why it’s important to analyze every project’s needs individually, keeping in mind the pros and challenges of using UI component libraries.

Want to learn more about UI components? Be sure to read this: What is a UI component explorer and do you need one in your React project?

And if you’re looking for more ReactJS insights, check out our company blog!