Top 8 React UI libraries to use in 2020

In this article, we will see top 8 react libraries that are commonly used in the community. Top 8 React UI libraries to use in 2020.

Disclaimer : the list is based on the use case for most of the applications. feel free to comment if i missed anything in the list.

Recent Article,

React packages that improved my productivity in 2019

Chakra UI

Mainly, Chakra UI is getting popular these days due to its composable components concept.

Using Chakra UI, you can build a completely accessible and composable react applications. Accessibility is in built when you use ChakraUI.

if you want to build a design system. i highly recommend to go with chakraUI as it solves lots of problem in-built.

Screenshot 2020 01 25 at 1 31 47 PM

Semantic UI

semanticUI is a awesome library which uses javascript and CSS to provide a great design.

but, semantic UI is not a 100% compatible with react.

So, there comes the semantic UI react which is specifically for react application development.

Semantic UI is a great option if you are tired of using bootstrap with react.

Screenshot 2020 01 25 at 1 40 43 PM

Ant Design

it provides full fledged components library which provides us more than 50 components.

ant design follows their own design language which was created by the team itself.

Ant design is a great option if you want to a quick way of building react component without spending much time on it.

But the problem with that is, Unlike ChakraUI, if you want to customize some react components on your own.

it is very difficult to achieve that with ant design.

For example, let's say that you want to build a date picker with custom icon button. it is very hard to achieve the accessibility on that component.


Basically, Rebass is a tiny UI library which can create a composable component using a styled system library

it is like also Chakra ui which provides us the primitive elements like button,box and image etc.

Using that, we can build a powerful react components.

Screenshot 2020 01 25 at 1 55 25 PM

Onsen UI

Onsen UI is a component library that has mobile first design in mind.

if you are building an application which has priority for mobile design, consider using onsen UI for your application.

one of the best things about onsen UI is, it is written in pure javascript.

But, it can integrate with react easily.

Screenshot 2020 01 25 at 2 04 54 PM


React Spinners

I know this is not a complete UI library. react spinner becomes unavoidable react library.

As the name suggest, this is a library to create spinners for your react applications.

What i really like about this library is, simple and elegance. i am using this library in my projects nowadays.

Feel free to check it out.

Screenshot 2020 01 25 at 2 59 08 PM

React tables

one of the common use-case in any of the react applications is building a data grid or table.

react table solves the problem for you. more than that, you can use react tables hooks to customize it.

react virtualized

Mainly, React virtualize solves a similar problem like react tables.

But, the difference is that react virtualized helps to render a large tabular data in your react application in an efficient way.

speciality of this library is, it can handle more than 100 columns or even large set of data in dropdown in a much smoother way.

Check out their docs to know more about this library

To Read More

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...

TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference be...

How to find project ideas to practi...

Ever wondered what how to get a real world experience on web development while w...

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...