Awesome React components & libraries to use πŸ†

This is a list of awesome useful react components and libraries that can solve your problems and boost your app performance & creativity.

UI Components

Editable data grid / spreadsheet

  • ag-grid β€” Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • gigatables-react β€” Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  • react-data-grid β€” Excel-like grid.
  • revo-grid β€” demo/docs β€” Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid β€” demo/docs β€” Add spreadsheet-like behavior to your app
  • jqwidgets-react-grid β€” Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

Table

  • autoresponsive-react β€” Auto Responsive Layout Library For React.
  • ka-table β€” demo β€” Customizable table component with sorting, filtering, grouping, virtualization, editing etc. πŸ†•
  • material-table β€” demo/docs β€” Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
  • mui-datatables β€” Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
  • react-data-table β€” demo/docs β€” accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
  • react-table β€” demo β€” Hooks for building fast and extendable tables and datagrids
  • rsuite-table β€” demo/docs β€” A table component that supports virtualized.
  • sematable β€” Client-side sorting, pagination, and text filter for redux/react based apps.
  • DevExtreme React Grid β€” High-performance plugin-based data grid for Bootstrap and Material Design.
  • Smart React Grid β€” Fast and feature-complete data grid with Material Design.
  • KendoReact Grid β€” Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

Infinite Scroll

  • @egjs/react-infinitegrid β€” npm β€” demo β€” A module used to arrange card elements including content infinitely according to various layout types.
  • react-lazyload β€” Lazyload your Component, Image or anything matters the performance.
  • react-list β€” A versatile infinite scroll React component.
  • react-virtualized β€” React components for efficiently rendering large lists and tabular data.
  • react-recycled-scrolling β€” npm β€” demo β€” Simulate scrolling using fixed number of DOM elements for large lists with React Hooks

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  • boron β€” A collection of dialog animations with React.js.
  • react-aria-modal β€” A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-modal β€” Accessible modal dialog component for React.
  • react-skylight β€” A react component for modals and dialogs.
  • reoverlay β€” demo β€” The missing solution for managing modals.
  • sweetalert2 β€” demo/docs β€” A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes. Zero dependencies.
  • sweetalert2-react-content β€” Official SweetAlert2 enhancer adding support for React elements as content

Notification

Toaster / snackbar β€” Notify the user with a modeless temporary little popup

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders/spinners/progress bars β€” Let the user know that something is loading

Carousel

Buttons

Collapse

Chart

Display data in charts/graphs/diagrams

  • chartify β€” React.js plugin for building animated draggable and customizable charts.
  • essential js 2 charts β€” Beautiful and interactive charts & graphs for react.
  • jscharting-react β€” React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
  • react-chartist β€” React component for Chartist.js.
  • react-charty β€” demo β€” Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
  • react-chartjs-2 β€” Common react charting components using Chart.js 2.0.
  • react-d3-components β€” D3 Components for React.
  • react-dazzle β€” Dashboards made easy in React JS.
  • react-google-charts β€” React-google-charts React component.
  • react-highcharts β€” React-highcharts.
  • react-sigmajs β€” Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
  • react-sparklines β€” Beautiful and expressive Sparklines React component.
  • react-timeseries-charts β€” Declarative timeseries charts.
  • react-vis β€” Data visualization library based on React and d3.
  • recharts β€” Redefined chart library built with React and D3.
  • rumble-charts β€” React components for building composable and flexible charts.
  • victory β€” Data viz for React.
  • semiotic β€” Semiotic is a data visualization framework for React.
  • DevExtreme React Chart β€” High-performance plugin-based chart for Bootstrap and Material Design.
  • Smart React Chart β€” Feature complete Charting library.
  • react-muze β€” React wrapper for muze(free data visualization library for creating exploratory data visualizations in the browser, using WebAssembly)

Tree

Display a tree data structure

  • react-treebeard β€” React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
  • react-treeview β€” Easy, light, flexible tree view made with React.

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

Map

  • google-map-react β€” Universal google map react component, allows render react components on the google map.
  • react-geosuggest β€” A React autosuggest for the Google Maps Places API.
  • react-leaflet β€” React components for Leaflet maps.
  • react-map-gl β€” A React wrapper for MapboxGL-js and overlay API.
  • react-mapbox-gl β€” A React binding of Mapbox-gl-js.
  • react-svg-map β€” demo β€” A set of components to display an interactive SVG map.

Time / Date / Age

Display time / date / age

Photo / Image

Display images/photos

Icons

Display icons/icon set/emojis

  • iconify-react β€” Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  • react-icons β€” Svg react icons of popular icon packs using ES6 imports.
  • react-open-doodles β€” Awesome free illustrations as react components.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdown source

Canvas

Sketch input using Canvas or SVG

  • react-konva β€” React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
  • react-sketch β€” A Sketch tool for React-based applications, backed-up by FabricJS
  • react-sketch-canvas β€” Demo Freehand vector drawing tool for React using SVG as a canvas. Accepts input from Mouse, touch, and graphic tablets

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Emoji picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

  • coloreact β€” A tiny Color Picker for React.
  • react-color β€” Color Pickers from Sketch, Photoshop, Chrome & more.
  • react-input-color β€” React input color component with hsv color picker.

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

Autosize Input / Textarea

Star Rating

Drag and Drop

Sortable List

Let the user define an order on a list

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

  • interweave β€” React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  • react-designer β€” Easy to configure, lightweight, editable vector graphics in your react components.
  • react-upload-gallery β€” React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

UI Layout

Components to layout the app’s UI

  • autoresponsive-react β€” Auto responsive grid layout library.
  • flexbox-react Unopinionated, standard compliant flexbox components.
  • golden-layout β€” A multi-screen JavaScript Layout manager.
  • hedron β€” A no-frills flexbox grid system, powered by styled-components.
  • m-react-splitters β€” Splitter component, written in TypeScript.
  • muuri-react β€” demo β€” docs β€” Responsive, sortable, filterable and draggable grid layouts.
  • react-grid-layout β€” A draggable and resizable grid layout with responsive breakpoints, for React.
  • react-masonry-component β€” Wrapper for @desandro’s Masonry.
  • react-reflex β€” Flex layout container component for advanced React web applications.
  • react-spaces β€” demo/docs β€” Nestable anchored, resizable, scrollable components.
  • react-stonecutter β€” Animated grid layout component.
  • react-colrow β€” Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.

UI Animation

Animate transitions

Parallax

UI Frameworks

Responsive

Set of components + responsive layout system

  • zeit-ui-react β€” Modern and minimalist React UI library.
  • πŸš€ ant-design β€” demo/docs β€” A UI Design Language from China. Individual components available.
  • atlaskit β€” Atlassian’s official UI library, with components from badge to tree table.
  • base web β€” Base Web is a foundation for initiating, evolving, and unifying web products.
  • belle β€” Configurable React Components with great UX.
  • carbon β€” demo/docs β€” A design system built by IBM.
  • chakra-ui β€” demo/docs β€” Simple, Modular & Accessible UI Components for your React Applications.
  • evergreen β€” demo/docs β€” Evergreen React UI Framework by Segment.
  • fluent-ui β€” demo/docs β€” 🌈 React components that inspired by Microsoft’s Fluent Design System.
  • grommet β€” The most advanced UX framework for enterprise applications.
  • gestalt β€” demo/docs β€” A set of components that supports Pinterest’s design language.
  • insites-ui β€” Modern, opinionated, minimal, yet powerful React components library, powered by Styled Components.
  • office-ui-fabric-react β€” React components for building Microsoft web experiences.
  • orbit-components β€” Components for building travel oriented projects.
  • pivotal-ui-react β€” React components based on a custom version of the Bootstrap library.
  • primereact β€” A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
  • react-bootstrap β€” Bootstrap components built with React.
  • react-foundation β€” Foundation as React components.
  • reakit β€” demo/docs Toolkit for building accessible rich web apps
  • rebass β€” Configurable React Stateless Functional UI Components.
  • searchkit β€” React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  • semantic-ui-react β€” The official Semantic-UI-React integration.
  • shineout β€” demo β€” Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

  • πŸš€ Material-UI β€” Full suite of components. Build your own design system, or start with Material Design.
  • Autocomplete β€” Accessible autocomplete, combobox, multiselect
  • Icons β€” 1,000+ SVG material icons.
  • Modal β€” Accessible modal dialog component.
  • Slider β€” Accessible slider component.
  • Table β€” table with sorting, selecting, pagination, virtualized.
  • Tree View β€” Accessible tree view component for React.
  • react-essence β€” Essence β€” The Essential Material Design Framework.
  • react-materialize β€” Material design for react, powered by materializecss.
  • react-toolbox β€” A set of React components implementing Google’s Material Design.
  • mdbootstrap β€” React Bootstrap with Material Design

Mobile

  • antd-mobile β€” Configurable Mobile UI from China.
  • Ionic React β€” Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
  • OnsenUI β€” demo/docs β€” Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Component Collections

  • blueprint β€” demo β€” docs β€” UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  • dataminr-react-components β€” Collection of reusable React Components and utility functions.
  • shards-react β€” docs/demo β€” A beautiful and modern React design system. Freemium πŸ’°
  • aframe-react β€” Build virtual reality experiences with A-Frame and React.
  • react-admin β€” Build admin user experiences on top of REST and GraphQL services.
  • react-desktop β€” React UI Components for macOS Sierra and Windows 10.
  • matrix-card β€” demo β€” Simplest possible component to generate matrix rain style cards.
  • rsuite β€” demo/docs β€” Suite of components for β€œenterprise system products”.

UI Utilities

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

  • react-hotkeys β€” Declarative hotkey and focus area management for React.
  • react-key-handler β€” React component to handle keyboard events.
  • react-keydown β€” Lightweight keydown wrapper for React components.
  • react-shortcuts β€” Manage keyboard shortcuts from one place.
  • useKeyCapture β€” A custom hook to ease the key-press listeners of a target/global.

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Set meta tags, <title>, children of

Portal

Render an element at an arbitrary DOM node

  • react-gateway β€” Render React DOM into a new context (aka β€œPortal”).
  • react-layer-stack β€” Simple but ubiquitously powerful and agnostic layering system for React.
  • react-portal β€” React component for transportation of modals, lightboxes, loading bars… to document.body.

Test User Behavior

A/B tests, experiments, …

  • react-ab β€” Simple declarative and universal A/B testing component for React.
  • react-experiments β€” React components for implementing UI experiments.

Code Design

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

  • alt β€” Isomorphic flux implementation.
  • baobab-react β€” React integration for Baobab.
  • cerebral β€” A state controller with its own debugger.
  • effector-react β€” React bindings for effector, an effective multi-store state manager.
  • fluorine-lib β€” Reactive state and side effect management for React using a single stream of actions.
  • fluxible β€” A pluggable container for universal flux applications.
  • fluxxor β€” Flux architecture tools for React.
  • kea β€” High level architecture for React apps.
  • mobx-react β€” React bindings for MobX. Create fully reactive components.
  • react-3ducks β€” demo β€” Simple state management solution for React.
  • react-controllables β€” Easily create controllable components.
  • react-i13n β€” A performant, scalable and pluggable approach to instrumenting your React application.
  • react-redux-provide β€” Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
  • react-redux β€” Official React bindings for Redux.
  • react-storage-hoc β€” demo β€” Higher-order components for working with localStorage and sessionStorage.
  • redux-batched-actions β€” Reducer + action to reduce actions under a single subscriber notification.
  • redux-batched-subscribe β€” Store enhancer for which allows batching subscribe notifications.
  • redux β€” Predictable state container for JavaScript apps.
  • reflux β€” A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
  • reselect β€” Selector library for Redux.
  • resourcerer β€” Declarative data-fetching framework for REST APIs
  • shasta β€” Dead simple + opinionated toolkit for building redux/react applications.

Form Logic

  • data-driven-forms β€” A declarative way for building forms with all the functionality.
  • formcat β€” A simple and easy way to control forms in React using the React Context API
  • formik β€” Build forms without tears and supports Validation in ease.
  • formsy-react β€” A form input builder and validator for React JS.
  • plexus-form β€” A dynamic form component for react using JSON-Schema.
  • react-hook-form β€” React hooks for form validation without the hassle.
  • react-jsonschema-form β€” A React component for building Web forms from JSONSchema.
  • react-validation-mixin β€” Simple validation mixin (HoC) for React.
  • react-final-form β€” Subscription-based form state management
  • react-formawesome β€” Complex library for creating awesome forms.
  • surveyjs β€” The advanced Survey and Form library

Router

Props from server

Component properties asynchronously fetched over the network

  • react-async β€” Asynchronously fetch data for React components.
  • react-refetch β€” A simple, declarative, and composable way to fetch data for React components.
  • react-resolver β€” Async rendering & data-fetching for universal React applications.
  • react-router-relay β€” Relay integration for React Router.
  • redial β€” Universal data fetching and route lifecycle management for React etc.
  • redux-async-connect β€” Request async data, store in redux state, and connect to your component.
  • redux-connect β€” Provides decorator for resolving async props in react-router.
  • axios-react β€” HTTP client component for React.

Communication with server

  • adrenaline β€” Simple Relay alternative.
  • apollo-client β€” A simple caching client for any GraphQL server and UI framework.
  • cerebral-module-http β€” HTTP module for Cerebral.
  • react-apollo β€” React data container for the Apollo Client.
  • react-relay β€” Relay is a JavaScript framework for building data-driven React applications.
  • react-transmit β€” Relay-inspired library based on Promises instead of GraphQL.

CSS / Style

  • aesthetic β€” A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.
  • aphrodite β€” It’s inline styles, but they work!.
  • classnames β€” A simple javascript utility for conditionally joining classNames together.
  • inline-style-prefixer β€” Run-time Autoprefixer for Inline Style Objects.
  • paperclip β€” docs β€” Build UI primitivites with plain HTML & CSS.
  • radium β€” A set of tools to manage inline styles on React elements.
  • react-container-query β€” Modular responsive component.
  • react-css-modules β€” Seamless mapping of class names to CSS modules inside of React components.
  • react-responsive β€” Media queries in react for responsive design.
  • reactponsive β€” Responsive components and hooks.
  • styled-components β€” Visual primitives for the component age.

HTML Template

Isomorphic Apps

  • hypernova β€” A service for server-side rendering your JavaScript views.
  • isomorphic-relay β€” Adds server side rendering support to React Relay.
  • isomorphic-style-loader β€” Isomorphic CSS style loader for Webpack.
  • react-server β€” React framework with server render for blazing fast page load.
  • rill β€” Universal web application framework.
  • webpack-isomorphic-tools β€” Server-side rendering for your Webpack-built applications (e.g. React).

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

  • create-react-app β€” Create React apps with no build configuration.
  • crisp-react β€” Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
  • electron-react-boilerplate β€” Live editing development on desktop app.
  • essential-react β€” A minimal skeleton for building testable React apps using Babel.
  • generator-react-webpack β€” Yeoman generator for ReactJS and Webpack.
  • generator-starhackit β€” Full-stack starter kit.
  • gluestick β€” GlueStick is a command line interface for quickly developing universal web apps.
  • nwb β€” CLI tool and devDependency for React apps & components and npm modules.
  • react-boilerplate β€” Quick packager-agnostic boilerplate for React modules using JSX.
  • react-hot-boilerplate β€” Minimal live-editing boilerplate for your next ReactJS project.
  • react-redux-universal-hot-example β€” A starter boilerplate for a universal webapp.
  • reactuate β€” React/Redux stack (not a boilerplate kit).
  • redux-cli β€” An opinionated CLI for building redux/react apps quicker.
  • relay-fullstack β€” Relay Starter Kit.
  • roc β€” Modern Application Development Ecosystem.
  • universal-redux β€” An npm package that lets you jump right into coding React and Redux.
  • create-react-dependency β€” Create react dependencies with no build configuration.
  • phoenix β€” A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
  • react-enterprise-starter-kit β€” Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
  • express-react-boilerplate β€” A tool that helps programmers create Express & React projects easily base on react-cool-starter.

Miscellaneous

  • react-inlinesvg β€” An SVG loader component for ReactJS.
  • redux-auth-patch β€” Complete token authentication system for react + redux that supports isomorphic rendering.
  • redux-search β€” Redux bindings for client-side search.
  • tcomb-react β€” Alternative syntax for PropTypes.
  • react-find β€” βš›οΈ Elegant, accessible search component for React.
  • react-universal-hooks β€” πŸŽ‰ support react hooks everywhere (Functional or Class Component).

Utilities

i18n

Internationalization / L10n / localization / translation

  • react-i18next β€” Internationalization for react done right. Using the i18next i18n ecosystem.
  • react-intl β€” Internationalize React apps.
  • react-translate-maker β€” Universal internationalization (i18n) open source library for React.
  • react-intl-universal β€” demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
  • js-lingui β€” docs β€” A readable, automated, and optimized (5 kb) internationalization for JavaScript.

Framework bindings / integrations

Integrations with Third Party Services

Performance

UI

Inspect

Lazy Load

  • react-infinite-grid β€” A React component which renders a grid of elements.
  • react-infinite β€” A browser-ready efficient scrolling container based on UITableView.
  • react-lazy-load β€” React component that renders children elements when they enter the viewport.
  • react-lazyload β€” Lazyload your Component, Image or anything matters the performance.
  • react-virtualized β€” React components for efficiently rendering large lists and tabular data.

App Size

Server-Side Rendering

  • react-esi β€” A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

Dev Tools

Test

  • carte-blanche β€” An isolated development space with integrated fuzz testing for your components.
  • chai-enzyme β€” Chai.js assertions and convenience functions for testing React Components with enzyme.
  • enzyme β€” JavaScript Testing utilities for React.
  • jest-cli β€” Painless JavaScript Testing.
  • react-unit β€” Lightweight unit test library for ReactJS.
  • redux-ava β€” Write AVA tests for redux pretty quickly.
  • redux-test-recorder β€” A redux middleware to automatically generate tests for reducers through ui interaction.
  • rut β€” React testing made easy with react-test-renderer. Supports DOM and custom renderers.
  • ui-harness β€” Create, isolate and test modular UI components in React.
  • unexpected-react β€” Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.

Redux

Inspect

  • fluxguard β€” PROD change monitoring that highlights all DOM + design changes.
  • react-inspector β€” Power of Browser DevTools inspectors right inside your React app.
  • react-json-inspector β€” React JSON inspector component.
  • reactotron β€” A CLI and OS X app for inspecting your React JS and React Native apps.

Miscellaneous

Miscellaneous

  • DataFormsJS JSX Loader β€” Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
  • html-to-react-components β€” Extract annotated portions of HTML into React components as separate modules.
  • htmltojsx β€” Automatically AJAXify plain HTML with the power of React. It’s magic!.
  • jsonx β€” React JSON Syntax.
  • mozaik β€” MozaΓ―k is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
  • react-blessed β€” A react renderer for blessed.

Static Website Generator

  • gatsby β€” Transform plain text into dynamic blogs and websites using React.js.
  • phenomic β€” Modern static* website generator based on the React and Webpack ecosystem.

Cloud Solutions

Databases

Enjoy :)

--

--

FullStack Developer :)

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store