DEV Community

loading...

React UI Kits

kayis profile image K Updated on ・4 min read

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.

Discussion (24)

pic
Editor guide
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 Author

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 Author

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 Author

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

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
norbertasgaulia profile image
norbertas-gaulia

Nice list, Atlaskit looks most quality product. Although none of these kits comes even close in terms of design of almost random admin template for a few bux.

Collapse
dance2die profile image
Sung M. Kim

That looks really nice. Thanks for sharing~

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
borovik96 profile image
Collapse
kayis profile image
K Author

Yes, looks interesting. :)

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 Author

You are welcome 😬

Collapse
moumnimohamed profile image
moumni mohamed • Edited

how can i create my one ui kit for react native ?

Collapse
kayis profile image
K Author

Look at the github repositories here, they can be used as inspiration! :)

Collapse
uqimerioni profile image
Collapse
kayis profile image
K Author

At the moment: None of them.

I just looked into them. Until now I hand-rolled all my UIs with plain React.

Collapse
wannymiarelli profile image
Wanny Miarelli

If I don't go wrong Atlassian Kit is not intended for general use, the license state that it can only be used to create products connected with the Atlassian eco-system, be careful :)

Collapse
kayis profile image
K Author

Classic Atlassian, thanks!

Collapse
anthonybrown profile image
Tony Brown

I've used Grommet and Material UI.

I'm not a huge fan of these but I can see why people use them.

Collapse
anthonybrown profile image
Tony Brown

This is a young project but definitely the most promising imo
ui.reach.tech/
Ryan Florence's project, it's all about accessibility and composition.
Nice to work with, easy to style. If I had to use one again, this is the one I would pick.

Just my 2 cents 🍾