🚀 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.
Contributing
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.
Table of Contents
UI Components
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.
Table
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.
Overlay
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
Notification
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
Sticky
Fixed headers / scroll-up headers / sticky elements
Tabs
Loader
Loaders / spinners / progress bars — Let the user know that something is loading
Captcha
Carousel
Collapse
Chart
Display data in charts / graphs / diagrams
一份精选的优秀 React 组件和库列表，按类别整理，包括数据表格、轮播、图表、表单、路由等。