🚀 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.
See also: Awesome React Frameworks.
Maintainers:
- @petebray, author of Fluxguard — monitor PROD website changes.
- @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
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.
Back to top ⬆️
Editable data grid / spreadsheet
- AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
- gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
- Handsontable - demo - docs - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.
- jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
- MUI X Data grid - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
- react-data-grid - Excel-like grid.
- ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
- revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
- SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
- SVAR React DataGrid - demo - docs - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.
-
ka-table - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
-
mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features
-
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
-
TanStack Table - demo - Headless UI for building powerful tables & datagrids
-
react-table-library - demo - React Table Library -- an almost headless table library -- for building better tables.
-
rsuite-table - demo/docs - A table component that supports virtualized.
-
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.
-
simple-table - demo - docs - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.
-
KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
-
Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
- @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 else where the performance matters.
- react-list - A versatile infinite scroll React component.
- @af-utils/virtual - demo/docs - Render large scrollable lists and grids.
- react-window - demo - React components for efficiently rendering large lists and tabular data
- virtua - demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.
Display overlay / modal / alert / dialog / lightbox / popup
- react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- react-modal - Accessible modal dialog component for React.
- @paratco/async-modal - Simple async modal handler for React.
- 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
Toaster / snackbar — Notify the user with a modeless temporary little popup
- react-notifications-component - demo - Highly customizable and easy-to-use component for notifications.
- notistack - demo - docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
- react-local-toast - demo - docs - show feedback linked to particular component instead of app-wide toasts.
- react-toast - demo - docs - Minimal toast notifications.
- 🚀 react-toastify - demo - best bet out there at the moment. Hooks support. No refs.
- react-confirm-lite - demo - is a lightweight, promise-based confirmation dialog for React with built-in Tailwind CSS support. It’s designed to be as simple to use as react-toastify, while remaining fully customizable.
- reapop - A React & Redux notifications system.
- react-hot-toast - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
- Sonner - An opinionated toast component for React.
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
- cmdk - Fast, composable, unstyled command menu for React.
- kbar - demo - Fast, portable, and extensible cmd+k interface.
Display a tree data structure
- json-edit-react - demo - Highly configurable JSON/Object tree viewer and editor
- react-arborist - demo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
- react-complex-tree - demo - docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
- he-tree-react - demo - docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.
Ways to navigate views
- react-dailymotion - Dailymotion player component for React.
- react-player - A react component for playing a variety of URLs, including YouTube.
- react-soundplayer - Create custom SoundCloud players with React.
- react-youtube - React.js powered YouTube player component.
- video-react - A web video player built for the HTML5 world using React library.
- material-ui-audio-player - Audio player for material ui design.
- react-vision-camera - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
- react-barcode-qrcode-scanner - Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.
- google-map-react - Universal google map react component, allows render react components on the google map.
- mapkit - A library for integrating Apple Maps using MapKit JS, with annotations, overlays, and search.
- pigeon-maps - demo - ReactJS Maps without external dependencies.
- 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-svg-map - demo - A set of components to display an interactive SVG map.
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.
- react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon.
- tabler-icons-react - A set of over 450 free MIT-licensed high-quality SVG icons.
- Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
Display a control element to paginate
Display parsed markdow source
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 canvas. Accepts input from Mouse, touch, and graphic tablets
- react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
- html2canvas - Take screenshots of any part of your web page using Javascript.
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
- coloreact - A tiny Color Picker for React.
- react-color - Is a tiny color picker widget component for React apps.
- react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
- react-input-color - React input color component with hsv color picker.
Let the user select something (e.g. a tag) while typing
Let the user add multiple tags in a single input
Autosize Input / Textarea
- react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
- react-dnd - Drag and Drop for React.
- react-drag-sizing - "Drag to resize" (sizing) as React Component.
- react-draggable - React draggable component.
- react-dragula - Drag and drop so simple it hurts.
- react-dropzone - Simple HTML5 drag-drop zone with React.js.
- react-movable - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
- react-sortable-pane - Sortable and resizable pane component for React.
- neodrag - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.
Let the user define an order on a list
Image manipulation
Form Component Collections
- @anatoliygatt/numeric-stepper - demo - A fully themeable and accessible numeric stepper component.
- 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.
Back to top ⬆️
Components to layout the app's UI
Back to top ⬆️
Animate transitions
gem-hunter