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.
Looking for something more in-depth and hackable? Checkout the OpusCapita Showroom.
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
Awesome components for building React apps.
Painless transitions built for
react-router, powered by the popular
react-motion spring animation library producing silky smooth page transition effects. Checkout the demo to see for yourself! Try using
Cmd along with the arrow keys to navigate rapidly to trigger an avalanche of falling text.
Persistent Redux store for Reasonaboutable™️ Offline-First applications, with first-class support for optimistic UI. Use with React, React Native, or as standalone state container for any web app.
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.
If you’re building a React App using Google’s Google’s Design Guidelines this MUI clone is a must-see. It reached the
1.0.0-beta release after over 6000 commits. And while that may be against SemVer best practices the important take away is stability as the final coats of polish are added to this cornerstone React library.
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.
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.
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.
Awesome component libraries and native modules for building React Native apps.
Material Design for React Native. Haven’t tried it yet but it claims to work for both iOS and Android and support theme rolling. Includes an Example app for use with Expo, a Getting Started guide for a soft landing and will be maintained by the Callstack team for ongoing support—a sore point for RN developers no doubt.
From Glen Maddern and Max Stoiber, styled components for the component age. Uses tagged template literals and enables you to write “actual CSS” to style your components. That’s cool. Learned about this one from a post by Jani Eväkallio.
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.
React Native UI Kitten
Hold your jokes about the name, here’s another UI framework for React Native. It’s not necessarily awesome yet but I’m adding it here for tracking purposes as it’s open source and could become awesome if enough people get behind it.
CodePush has been called “the most hipster thing” out of Microsoft in, well, 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 Simple Auth
Looking for more control over how your users authenticate? Roll your own authentication setup for Google, Facebook, Twitter or Tumblr.
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 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 Swipeable Views
Does what it says on the tin. Swipeable views for your React Native app.
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile! It’s wrapper for React Native was open sourced in late January 2017.
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.
Style as a function of state. Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
See it in comparison to others on npmtrends.com.
Declarative Animations Library for React and React Native. My favorite part is in the README and I quote “At some point, React Native will itself depend on this library.” Whoa.
nofollowlinks indicate the linked document is not endorsed by the author of the linking site. For example, if the author doesn’t trust it, does not wish to pass authority, or if there is commercial relationship between the two, a link is more likely to be nofollowed.
nofollowlinks play a role in the passage of authority and page rank in Search engine algorithms. ↩