🚀 Absolutely Awesome React Components & Libraries
This is a list of AWESOME components. Nope, it's NOT a comprehensive list of
every React component under the sun. So, what does "awesome" mean? Well:
- It solves a real problem
- It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
- It has recent code commits!
Look for a 🚀 for truly amazing projects. And look for quickie maintainer
commentary and reviews in (italic parens) after some listings of note.
Maintainers:
Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.
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.
- autoresponsive-react - Auto Responsive Layout Library For React.
- griddle-react - Simple grid component that can display data as a table, a list of cards, or on the map.
- 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-pivot - Data-grid component with pivot-table-like for data display, filtering, and exploration.
- 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.
Display overlay / modal / alert / dialog / lightbox / popup
- boron - A collection of dialog animations with React.js.
- modali - A delightful modal dialog component, built from the ground up to support React Hooks.
- react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- react-dock - Resizable dockable react component.
- react-modal - Accessible modal dialog component for React.
- react-skylight - A react component for modals and dialogs.
- 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
Toaster / snackbar — Notify the user with a modeless temporary little popup
Menus / sidebars
Fixed headers / scroll-up headers / sticky elements
Loaders / spinners / progress bars — Let the user know that something is loading
Display data in charts / graphs / diagrams
Display a tree data structure
Ways to navigate views
Display time / date / age
Display images / photos
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.
Display a control element to paginate
Display parsed markdow source
Let the user enter data
Date picker / time picker / datetime picker / date range picker
Masked inputs, specialized inputs; email / telephone number / credit card / etc.
Autosuggest / autocomplete / typeahead
Let the user select something (e.g. a tag) while typing
Let the user add multiple tags in a single input
Autosize Input / Textarea
Let the user define an order on a list
- react-anything-sortable - Sort any children with touch support and IE8 compatibility.
- react-sortable-hoc - Higher-order components to turn any list into an animated, touch-friendly, sortable list.
- react-sortable - A sortable list component built with React.
- sortablejs - Lists reorderable by drag-and-drop, within and among lists.
Image manipulation
Form Component Collections
- 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.
Components to layout the app's UI
Animate transitions
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.
- 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-apps - Foundation Apps 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-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
- 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.
- 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".
Report computed styles
Report when a component becomes visible/hidden
Determine and report measurements of an element
Turn user input into actions
Set meta tags, <title>, children of
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.
A/B tests, experiments, ...
- react-ab - Simple declarative and universal A/B testing component for React.
- react-experiments - React components for implementing UI experiments.
Libraries that help with code design
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.
- 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.
- 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
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
- 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.
- 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.
Scaffold / starter kit / Yeoman generator / stack ensemble / seed
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
- 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.
- react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments
- 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.
- 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.
- 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.
- gatsby - Transform plain text into dynamic blogs and websites using React.js.
- phenomic - Modern static* website generator based on the React and Webpack ecosystem.