W hat is a Component Library?

A component library is a cloud-based folder that consists of all the designed/styled parts of a website or piece of software. It helps designers to work in a consistent way and becomes very time efficient when executed correctly.

It generally follows atomic design by http://atomicdesign.bradfrost.com/

What is Atomic Design?

The terminology Atomic Design is an analogy from biochemistry. It’s all about “Atoms”, “Molecules” and “Organisms”.

Atomic Design is a methodology used to create web designs.

Atoms

Molecules

Organisms

Templates

Pages

What is a React Component Library

A collection of components, organized in a meaningful manner, and often (but not necessarily) providing some way to browse and preview those components and their associated assets.”

It is the same concept but this time all the components are React compatible. They expose their API via props…

React Component Libraries on the Market…

React Material-UI

React-Bootstrap

React toolbox

React Belle

React Grommet

Material Components Web

Ant Design React

PrimeReact

Office UI Fabric

Blueprint JS

React UI

Semantic UI React

Ring UI

ExtReact (paid)

Kendo React UI (paid)

And many more…

Why a React Component Library?

Component Libraries have tens of components ready for you out of the box.

Most of them also include solutions for responsive layouts. No need for third party CSS or Grid libraries.

Increased speeds in delivery plus engineer peace of mind.

Ability to collaborate efficiently

Staying consistent

Customization & flexibility

If we don’t use a library then we need to create our version…

This process involves the following:

Coding the component itself

Writing tests for the component

Maintaining a central Component Library and communicating with developers.

and communicating with developers. When the component needs to be updated then all of the above needs to be updated/maintained.

Here is what happens in real life…

We never create a library that is as feature rich as the libraries out there, our version always stays as MVP…

We can never think of all the scenarios that the component might require so we limit ourselves with basic functionality and then complain to Product Managers when they want to expand the functionality of the component.

Libraries out there are followed by hundreds and sometimes thousands of developers who are finding and fixing bugs daily, adding new functionality, making sure that components are browser compatible and keeping the tests updated

With limited engineers, we can never achieve the same power. We incur technical debt and pay with interest in the future.

Most likely we are already using third-party components for select boxes, calendars etc. This creates chaos, UI inconsistency, incompatible version support and dependencies to multiple libraries.

The person who coded the table component gets a better offer in six months and now rest of the team ends up decoding his/her code.

What to look for when picking a React Component Library?

Library needs to be extensive. Components should cover 90% of the app scenarios. That is why I believe React-Bootstrap is not a good option.

is not a good option. It should not limit your UI design guides. Material UI pushes you to use flat colors, flat design principle. It may not be suitable for every project.

pushes you to use flat colors, flat design principle. It may not be suitable for every project. Should have a decent size of followers/community on GitHub.

Should support dynamic imports, Sass/Less…

Should easily be themed.

My Two Picks Are:

Stars (appreciation / usage): 26,503

Dependencies (bloat): 42

Dependents (usage): 615

Last Updated: 3 days ago

NPM downloads: 53,335 / week

Stars (appreciation / usage): 6,459

Dependencies (bloat): 5

Dependents (usage): 263

Last Updated: today

NPM downloads: 40,265 / week

My final pick is: Ant D React