🚀 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.

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

Table of Contents

• UI Components
  • Editable data grid / spreadsheet
  • Table
  • Infinite Scroll
  • Overlay
  • Notification
  • Tooltip
  • Menu
  • Sticky
  • Tabs
  • Loader
  • Captcha
  • Carousel
  • Buttons
  • Collapse
  • Chart
  • Command palette
  • Tree
  • UI Navigation
  • Custom Scrollbar
  • Audio / Video
  • Map
  • Time / Date / Age
  • Photo / Image
  • Icons
  • Paginator
  • Markdown Viewer
  • Canvas
  • Screenshot
  • Miscellaneous
  • Form Components
    • Date / Time picker
    • Emoji picker
    • Input Types
    • Autocomplete
    • Select
    • Color Picker
    • Toggle
    • Slider
    • Radio Button
    • Type Select
    • Tag Input
    • Autosize Input / Textarea
    • Star Rating
    • Drag and Drop
    • Sortable List
    • Rich Text Editor
    • Markdown Editor
    • Image Editing
    • Form Component Collections
    • Miscellaneous
    • Syntax Highlight
• UI Layout
• UI Animation
  • Parallax
• UI Frameworks
  • Responsive
    • Material Design
  • Mobile
  • Component Collections
• UI Utilities
  • Reporter
    • Visibility Reporter
    • Measurement Reporter
  • Device Input
    • Keyboard Events
    • Scroll Events
    • Touch Swipe
    • Mouse Events
  • Meta Tags
  • Portal
  • Test User Behavior
• Code Design
  • Data Store
  • Form Logic
  • Router
  • Props from server
  • Communication with server
  • CSS / Style
  • HTML Template
  • Isomorphic Apps
  • Boilerplate
  • Miscellaneous
• Utilities
  • i18n
  • Framework bindings / integrations
  • Integrations with Third Party Services
• Performance
  • UI
    • Inspect
    • Lazy Load
  • App Size
  • Server-Side Rendering
• Dev Tools
  • Test
  • Redux
  • Inspect
  • Miscellaneous
• Miscellaneous
  • Static Website Generator
• Cloud Solutions
  • Databases

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

• fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
• 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.
• 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.
• 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

• 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.

• 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.

• Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript

• AG Grid - The Best JavaScript Grid in the World

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 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.
• 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.
• reapop - A React & Redux notifications system.
• simple-react-notifications - demo - Tiny notification library (1kb gzip).
• react-hot-toast - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
• Sonner - An opinionated toast component for React.

Tooltip

• react-tooltip - React tooltip component.

Menu

Menus / sidebars

• hamburger-react - demo/docs - Animated hamburger menu icons for React.
• react-burger-menu - An off-canvas sidebar with effects and styles.
• react-offcanvas - Off-canvas menus for React.
• react-planet - demo - Create circular menus which looks like planets.
• mantine-contextmenu - demo/docs - Context-menu hook/component for applications built with Mantine UI.

Sticky

Fixed headers / scroll-up headers / sticky elements

• react-headroom - Hide your header until you need it.
• react-stickynode - A performant and comprehensive React sticky.

Tabs

• react-tabs - React tabs component.
• react-tabtab - React, tabs.

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

• react-loader-spinner - Collection set of react-spinner for async operation.
• react-redux-loading-bar - Simple Loading Bar for Redux and React.
• react-spinners-css - Amazing collection of react spinners components.
• react-spinners - A collection of loading spinner components for react.
• react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Captcha

• react-simple-captcha - npm - demo - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
• procaptcha - demo - docs - Privacy focused free CAPTCHA

Carousel

• @egjs/react-flicking -