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 think there is a toolkit for everyone's taste.

Ant Design

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

License: MIT

GitHub ~34.700 Stars

NPM: ~10.3279 weekly downloads


Atlaskit

Atlassian's official UI library, built according to the Atlassian Design Guidelines.

License: Apache License, Version 2.0

Bitbucket ~50 Watchers

NPM: ~90.600 weekly downloads


Blueprint

A React based UI toolkit for the web.

License: BLUEPRINT LICENSE (based on Apache 2.0 License)

GitHub ~12.200 Stars

NPM: ~53.300 weekly downloads


Clarity Design System

UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

License: MIT

GitHub ~4.200 Stars

NPM: ~11.200 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.

License: Apache License, Version 2.0

GitHub ~400 Stars

NPM: ~13.700 weekly downloads


Element

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

License: MIT

GitHub ~1.800 Stars

NPM: ~639 weekly downloads


Grommet

focus on the essential experience

License: Apache License 2.0

GitHub ~3.700 Stars

NPM: ~3.600 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.

License: MIT

GitHub ~200 Stars

NPM: ~300 weekly downloads


Lightning Design System

Create the world’s best enterprise app experiences.

License: Custom

GitHub ~2.400 Stars

NPM: ~10 weekly downloads


Lucid UI

Lucid UI is a React component library by AppNexus.

License: Apache License, Version 2.0

GitHub ~100 Stars

NPM: ~30 weekly downloads


Material Components

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

License: MIT

GitHub ~10.598 Stars

NPM: ~57.600 weekly downloads


Material-UI

React components that implement Google's Material Design.

License: MIT

GitHub ~41.500 Stars

NPM: ~400.600 weekly downloads


Office UI Fabric

The React-based front-end framework for building experiences for Office and Office 365.

License: MIT

GitHub ~3.500 Stars

NPM: ~32.000 weekly downloads


Polaris

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

License: MIT

GitHub ~1.900 Stars

NPM: ~4.1700 weekly downloads


PrimeReact

The Most Complete UI Framework for REACT

License: MIT

GitHub ~600 Stars

NPM: ~4.000 weekly downloads


Quasar Framework

High Performance Full Frontend Stack

License: MIT

GitHub ~7.600 Stars

NPM: ~4.200 weekly downloads


Reactkit

Toolkit for building really interactive UIs with React.

License: MIT

GitHub ~1.300 Stars

NPM: ~400 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.

License: Apache License 2.0

GitHub ~2.000 Stars

NPM: ~1.000 weekly downloads


Semantic UI React

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

License: MIT

GitHub ~8.200 Stars

NPM: ~83.000 weekly downloads


Shards React

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

License: MIT

GitHub ~75 Stars

NPM: ~47 weekly downloads

My First 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.

Posted on by:

kayis profile

K

@kayis

Taking care of developer relations at Moesif and creating educational content at fllstck.dev

Discussion

markdown guide
 

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.

 

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.

 

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/

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.

 

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.

 

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

 

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

 

I love Ant Design. Components and documentation are amazing 😊

 

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.

 

That looks really nice. Thanks for sharing~

 

Thanks for this!

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

 
 

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

 

You are welcome 😬

 

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

 

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

 
 

At the moment: None of them.

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

 

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 :)

 

Classic Atlassian, thanks!

 

I've used Grommet and Material UI.

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

 

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 🍾