awesome-react-components README

The project's README from github.com/brillout/awesome-react-components. As one markdown file: README.md.

🚀 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
UI Layout
UI Animation
- Parallax
UI Frameworks
UI Utilities
Code Design
Utilities
Performance
Dev Tools
- Test
- Redux
- Inspect
- Miscellaneous
Miscellaneous
- Static Website Generator
Cloud Solutions
- Databases

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

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

react-tooltip - React tooltip component.

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 - npm - demo - It's reliable, flexible and extendable carousel.
react-awesome-slider - demo - Fullpage, 3D animated, 60fps media and content slider/carousel.
pure-react-carousel - Built from scratch and not highly opinionated.
react-id-swiper - A library to use idangerous Swiper as a ReactJs component
react-instagram-zoom-slider - demo - A slider component with pinch to zoom capabilities inspired by Instagram.
react-responsive-carousel - React.js Responsive Carousel (with Swipe).
react-slick - React carousel component.
keen-slider - demo - Performant carousel/slider with native touch/swipe behavior.
swiper - demo - docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Buttons

react-awesome-button - demo - 3D animated 60fps buttons with load progress and social share actions.
reactive-button - demo - docs - A beautiful animated button component with progress indicator.

Collapse

react-accessible-accordion - Accessible Accordion component for React.
react-collapse - Component-wrapper for collapse animation with react-motion.
react-tabbordion - demo - Universal, semantic and CSS-only components for creating Accordions and Tabs.

Chart

Display data in charts / graphs / diagrams

essential js 2 charts - Beautiful and interactive charts & graphs for react.
EazyChart - demo - docs - Easily transform data into meaningful charts
echarts for react - Wrapper around beautiful Apache Echarts
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](https://gi

Searching Database…

48.7K ·GitHub

Awesome-react-components

What is this?

A curated list of standout React components and libraries, organized by category (data grids, carousels, charts, forms, routing, and more).

Is this a comprehensive directory of every React library, or something more selective?

It's deliberately selective: entries must solve a real problem in a unique or exceptional way, not just be popular, and must have recent commits.

How is the list organized so I can find what I need?

It has a Table of Contents with dozens of sections (UI Components, Form Components, UI Layout, UI Utilities, Code Design, Static Website Generators, Cloud Solutions, Databases, etc.), each broken into subcategories like Table, Carousel, Chart, or Autocomplete.

Where should I start if I just want a quick recommendation?

Look for the 🚀 rocket emoji marking truly amazing picks, plus maintainer commentary in italics after some listings to help you choose quickly.

Are entries vetted and kept up to date?

Yes — maintainers enforce freshness by requiring every pull request that adds a new resource to also remove a non-awesome existing one, keeping the list curated and current.

Is there a related list for full React frameworks rather than components?

Yes, the README points to a sister list called Awesome React Frameworks for that purpose.

What kind of things are covered beyond basic UI widgets?

Beyond UI components like grids, carousels and charts, it also covers code-architecture concerns such as state stores, routers, i18n, server-side rendering, static site generators, cloud solutions, and databases.

What are similar projects?

tremor-npm, awesome-react, ag-grid, victory, bolt-slides, dsh-genui, react-virtualized, awesome-shadcn-ui

Which topics is it in?

react-component, form, table, react-components, charts, component-library, data-visualization, awesome, ui-components, animation, dashboard, awesome-list

Creator: brillout
Size: 1.3 MB
Stars: 48.7K
Updated: CommitJan 26
Age: 10y
Commits · 90 Days