Awesome React Components

Awesome React Components to help you build better, faster, stronger apps.

4 minutes read

One of the best parts of building with React is discovering new and awesome open source components to use. Rather than throwing the kitchen sink at you, here’s a curated list of React components and component libraries I think are truly awesome.

Not sure where to start? Check out the list of Awesome React Boilerplates for a solid footing for your React-based apps.

Contributions via comments welcome. The best React and React Native Components will be moved into the article body and the nofollow removed.

React

Awesome components for building React apps.

Material UI
Short on design resources? Missing a style guide? No problem. With Material UI you can build and theme-roll an entire app without much of any design skills whatsoever, and still walk away looking like your right brain does more than fantasize about retro gaming on an RPi.

React Flexbox Grid
Though Material UI has a pretty stellar Grid List component, it’s not intended for layout. That’s what Flexbox is for, bra. This component leverages CSS Modules, and pairs well with Aphrodite and Material UI for bulletproof responsive layouts.

PhotoSwipe
Looking to create an engaging image gallery without going all-in on an image gallery component? Check out PhotoSwipe to see what it looks like, then install this gnarly react port for a superior image browsing UX for desktop and mobile.

Thanks to Anton Aleksandrov, creator of Artsembler, for the suggestion.

Semantic UI React
I had the pleasure of working with Levi Thomason on this project when it was still called Stardust. Like Material UI, Semantic UI is a great way to get a project to MVP without a designer. It’s now the official React port of Semantic UI and sure to continue gaining traction as time goes on. It’s also jQuery-free and fully unit tested.

ANT DESIGN
A fresh take on a lot a React component library. Doesn’t try to mimic any existing component library. It’s obvious even the smaller design details were carefully considered while putting together ANT DESIGN.

React Waypoint
Based on the ever-so-useful Waypoints library, leverage this component to trigger animations or capture events as users ogle their way down your pages.

React Native

Awesome components (native modules) for building React Native apps. All of which support both iOS and Android.

React Native Web
From Nicolas Gallagher, creator of SUIT CSS, this project aims to bring the power of React Native building blocks and touch handling to the Web. Forrealzies!

Shoutem UI Toolkit
Shoutem UI toolkit enables you to build professionally looking React Native apps with ease. It includes quite a few components, provides an opinionated way to theme apps and perform common animations (e.g. parallax). Pretty slick.

React Native Elements
Ostensibly inspired by Material Design, React Native Elements is another UI kit for building React Native apps. It includes a drawer and tab bar, as well as some nice looking form-related components Shoutem lacks.

CodePush
Somehow still the #2 result on Google for the term “CodePush”, this component has been called “the most hipster thing” out of Microsoft in…quite some time. CodePush allows devs to make remote changes to installed apps without going through the App and Play stores. It does add a bit of complexity and planning, but the payoff will be worth it if you’re making a breaking change to your back-end. Word to the weary, this is a single point of failure.

React Native Lock
From the team who brought us Auth0, the Lock component makes it simple to add authentication and password resets using email and social to your app. It even supports TouchID for iOS and can do Passwordless logins as well.

React Native Router Flux
Routing in RN is, ahem, a bit of suck. In fact, there are several ways to do navigation in RN core. Instead of rolling your own, use React Native Router Flux – which integrates easily with Redux – to help you manage card-based scenes in your app.

React Native Vector Icons
No app is complete without some glamorous iconography. Install this module for access to over 3000 vector icons from several different icon sets, including Material Icons.

React Native Video
Looking to add a fullscreen video background to your RN app? Here’s your ticket. From Brent Vatne, creator of Exponent, this native module–now a part of a collective group of components managed by the React Native Community–makes it a cinch to enable stunning visual effects in your app.

React Native Maps
From the homies at Airbnb, do map stuff with React Native. The RN core team has planned to remove their MapView (yeah, who knew?) in favor of this bad shooting star.

Universal

To be considered “Universal” for the purposes of this list components must not only be awesome, they must leverage the same codebase for both React and React Native and work on Android, iOS and Web.

Carbon UI
Piggybacking on React Native Web Carbon UI is a MUI clone being released just in time for the 2016 holidays. That’s arguably a better gift than a years’ worth of 24 Ways. Giggity.

Leave a Comment