Reviewing my favourite React UI libraries that I have used so far!

As React developers, we often spend a lot of time building User Interfaces (UI) for the end-users of the application. As our application grows, so does the complexity of creating new components such as buttons, menus, headers, footers, and so on!

Recently, I read Caelin Sutch’s article on how he fell in love with Chakra UI for React apps. Chakra is also one of my favourites and in this article, I will cover some of my other favourite libraries.

Bulma CSS

Bulma is an open-source framework based on Flexbox and has gained wide traction with over 200,000 developers using it.

One of the key reasons I use Bulma is that it’s just simple and beautiful. It comes with several UI components that are really well-designed with a focus on mobile responsiveness.

GitHub Stars: 43.9k

Bootstrap

Speaking of CSS frameworks, we cannot overlook the ever-popular Bootstrap (boasting over 152k stars on GitHub!!). It’s definitely an amazing framework, but truth be told, it has gotten a little boring. With many sites using Bootstrap, the styles and components seem monotonous. Nevertheless, Bootstrap is an awesome choice for those who are already familiar with it and it has a very trusted community of developers to rely on for support too.

GitHub Stars: 152k

Tailwind CSS

Tailwind CSS is currently the talk of the town. Tailwind allows you to style everything without leaving your HTML code. There is a CSS class for everything — colors, sizes, fonts, shadows, etc. I am personally not a fan of too many CSS classes in my code. I like segregating and modularising my code based on component-level CSS. That being said, Tailwind CSS could be a great solution for developers who love the freedom offered by the framework.

We have so far looked at CSS frameworks which are agnostic of whether we use React, Vue, Angular, etc. in our apps. Next, let’s look at some of libraries which were created solely for React apps.

GitHub Stars: 44.9k

Chakra UI

Chakra UI describes itself as a simple, modular and accessible component library. I only recently had the opportunity to utilise Chakra and wow, I must say it is pretty amazing!

As a developer, I find the concepts and design language of Chakra to be really intuitive. Everything just seems easy from a Flexbox-based component to a complex grid to forms and lists, there exists a component for everything.

Like Caelin Sutch has covered in his article, some of the advantages mentioned are:

Easily overridable style props
Simple API and docs
Intuitive composition of components
Attention to Accessibility
Integration with Themes
Consistency of naming props

And of course, it also has automatic support for light/dark modes!

Chakra UI is definitely a rising star!

GitHub Stars: 19.5k

Material UI

Material UI was initially developed by Google for Angular and React apps. It has a beautiful suite of components and layouts all based on Google’s material design. I have personally used it in some of my React projects and it's just really simple to use.

However, not everyone is a fan of material design. It is a very specific design language and sometimes, it feels ubiquitous since you see it everywhere (especially on Android apps).

If you’re keen to give this a go, Sebastian Eschweiler has written a detailed tutorial here.

GitHub Stars: 69.9k

Ant Design

Ant Design calls itself the second-most popular React UI library and it rivals Material UI’s components with its own design language. This library was kickstarted and maintained by Ant Financial group and arose from the effort to abstract complexity to create high reusable and stable components.

I really like the detailed docs of Ant Design and it is extremely customisable from my experience. The community is rich and the library is well-maintained.

GitHub Stars: 73.3k

Conclusion

There are more libraries such as React-Bootstrap and Semantic UI. However, the above libraries are my favourite! I have personally worked with each of them and I recommend them for the developer-friendly experience I had. My current favourite is Chakra UI and I believe I will be using it more in my future projects as well.

Leave your comments below on which are your favourite!

Happy coding! 💻

More content at plainenglish.io

My Favourite UI Libraries for React