DEV Community

K
K

Posted on • Edited on

React UI Kits

I found the amount of UI toolkits for React impressive, so I wanted to share what I found.

I found 18 UI kits and checked how many stars on GitHub and weekly downloads on NPm they have.

They are sorted by GitHub stars.

Ant Design

A design system with values of Nature and Determinacy for the better user experience of enterprise applications

Creator: XTech

License: MIT

GitHub ~64.500 Stars

NPM: ~506.403 weekly downloads


Material-UI

React components that implement Google's Material Design.

Creator: Community

License: MIT

GitHub ~62.000 Stars

NPM: ~1.479.000 weekly downloads


Blueprint

A React based UI toolkit for the web.

Creator: Palantir

License: BLUEPRINT LICENSE (based on Apache 2.0 License)

GitHub ~16.900 Stars

NPM: ~142.300 weekly downloads


Material Components

Build beautiful, usable products with Material Components for iOS, Android, web, and Flutter.

Creator: Google

License: MIT

GitHub ~15.000 Stars

NPM: ~116.000 weekly downloads


Semantic UI React

Semantic UI React is the official React integration for Semantic UI.

Creator: Community

License: MIT

GitHub ~11.800 Stars

NPM: ~188.000 weekly downloads


Evergreen

A React UI Framework for building ambitious products on the web.

Creator: Segment

License: MIT

GitHub ~10.300 Stars

NPM: ~7.400 weekly downloads


Fluent UI

A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Creator: Microsoft

License: MIT

GitHub ~9.700 Stars

NPM: ~22.200 weekly downloads


Grommet

focus on the essential experience

Creator: Community

License: Apache License 2.0

GitHub ~6.800 Stars

NPM: ~22.500 weekly downloads


Reakit

Toolkit for building really interactive UIs with React.

Creator: Community

License: MIT

GitHub ~4.400 Stars

NPM: ~60.100 weekly downloads


Polaris

Our design system helps us work together to build a great experience for all of Shopify’s merchants.

Creator: Shopify

License: MIT

GitHub ~3.700 Stars

NPM: ~79.800 weekly downloads


Lightning Design System

Create the world’s best enterprise app experiences.

Creator: Salesforce

License: Custom

GitHub ~3.000 Stars

NPM: ~10 weekly downloads


Element

Element, a Vue 2.0 based component library for developers, designers, and product managers (Forked and rewritten in React)

Creator: Community

License: MIT

GitHub ~2.500 Stars

NPM: ~7.300 weekly downloads


Ring UI

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

Creator: JetBrains

License: Apache License 2.0

GitHub ~2.500 Stars

NPM: ~2.100 weekly downloads


Elastic UI framework

The Elastic UI framework is a design library in use at Elastic to build internal products that need to share our aesthetics.

Creator: Elastic

License: Apache License, Version 2.0

GitHub ~2.300 Stars

NPM: ~13.900 weekly downloads


PrimeReact

The Most Complete UI Framework for REACT

Creator: Primetek

License: MIT

GitHub ~1.600 Stars

NPM: ~19.300 weekly downloads


Shards React

A high-quality & free React UI kit featuring a modern design system with dozens of custom components.

Creator: Designrevision

License: MIT

GitHub ~600 Stars

NPM: ~2.300 weekly downloads


Instructure-UI

Instructure-UI has a number of beautiful and accessible React components with baked-in styles and theming and helpful utility functions.

Creator: Instructure

License: MIT

GitHub ~300 Stars

NPM: ~175 weekly downloads


Lucid UI

Lucid UI is a React component library by AppNexus.

Creator: Xandr

License: Apache License, Version 2.0

GitHub ~200 Stars

NPM: ~400 weekly downloads


Learn React with my Book

React From Zero Book Banner

If you like understanding how React works by taking it apart, then you might like my book React From Zero. In the book, I dissect how React works by examining how components work, how elements are rendered, and how to create your own Virtual DOM.

You can download the first chapter for free here.

Top comments (25)

Collapse
 
sunnysingh profile image
Sunny Singh

I really like the composability of Reakit as that solves the issue a lot of UI component frameworks tend to have in not being flexible enough. Although personally the only React one I used so far was Material-UI v1.

However, I think it's better in the long term to create your own components and use primitive helpers like Downshift to reuse complex behavior with your own styling applied.

Collapse
 
kayis profile image
K

You're right.

I used Bootstrap because it felt really flexible and then, when I started using React, I switched to React-Bootstrap, but it didn't feel as powerfull as plain CSS-Bootstrap, so dropped it again and did my own components with CSS-Bootstrap.

Collapse
 
lukaszholeczek profile image
Łukasz Holeczek

Is your library available on GitHub, I would like to try it because we also create our own Bootstrap CSS based library for React.js github.com/coreui/coreui-react/

Thread Thread
 
kayis profile image
K

I didn't do a library. I use react-bootstrap and then I did "hand rolled components" for all my apps where I dropped bootstrap class names right inside the React components.

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch • Edited

Thanks, this is a great overview of what's available out there. Looks like the bigger the supporting company is, the bigger is the set of components to choose from in their ui kit. The most complete and thoroughly designed seem to be:

  • Atlas (Atlassian, the company behind Jira)
  • Elastic UI
  • Lightning (Salesforce)
  • Material UI (Google, of course)
  • Microsoft (if you want your apps to look like Office 365)

So far I only used Material UI. Shopify's set is smaller than I thought. And I wonder why JetBrains has a web UI kit at all, since their primary products are Java based fat client applications.

I will check out Elastic UI and Lightning in the next days.

Collapse
 
kayis profile image
K

Yes, I was blown away by all these companies. Salesforce and JetBrains... who would have thought?

Collapse
 
borovik96 profile image
Vladimir • Edited

This is one cool evergreen

Collapse
 
kayis profile image
K

Yes, looks interesting. :)

Collapse
 
samuelmesq profile image
Samuel Mesquita

I use Ant Design at work, it is really good.

Collapse
 
aaronplanell profile image
Aaron Planell López

I love Ant Design. Components and documentation are amazing 😊

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
dance2die profile image
Sung M. Kim

That looks really nice. Thanks for sharing~

Collapse
 
marcellahaller profile image
marcellahaller

good job, keep it up!
Speaking of UI-kit, the article gapsystudio.com/blog/what-is-a-ui-... should be mentioned, this is a useful material for beginners, which will give a clear understanding of the functioning of the ui kit and its benefits.

Collapse
 
victorinspace profile image
Victor Velasquez

Thanks for this!

I've only tried Semantic UI, but I'm looking forward to giving these a try!

Collapse
 
cbrintnall profile image
Christian Brintnall

Really nice comprehensive list, and includes quite a few that aren't normally mentioned which is great. Thanks!

Collapse
 
kayis profile image
K

You are welcome 😬

Collapse
 
uoxiu profile image
Nicolae Godina

We started the development of ebs-design, it's a young alternative for enterprise applications UI Kits.

Collapse
 
uqimerioni profile image
No Do