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.
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.
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.
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.
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.
But, it can integrate with react easily.
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.
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.
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