[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-818":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":15,"starSnapshotCount":15,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},818,"awesome-react-components","brillout\u002Fawesome-react-components","brillout","Curated List of React Components & Libraries.","",null,47746,3782,731,14,0,6,35,221,28,45,"Creative Commons Zero v1.0 Universal",false,"master",true,[26,27,28,29,30],"awesome","awesome-list","react","react-component","react-components","2026-06-12 02:00:19","# 🚀 Absolutely Awesome React Components & Libraries\n\nThis is a list of AWESOME components. Nope, it's NOT a comprehensive list of\nevery React component under the sun. So, what does \"awesome\" mean? Well:\n\n- It solves a real problem\n- It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)\n- It has recent code commits!\n\nLook for a 🚀 for truly amazing projects. And look for quickie maintainer\ncommentary and reviews in _(italic parens)_ after some listings of note.\n\nSee also: [Awesome React Frameworks](https:\u002F\u002Fgithub.com\u002Fbrillout\u002Fawesome-react-frameworks).\n\nMaintainers:\n\n- [@petebray](https:\u002F\u002Fgithub.com\u002Fbluepeter), author of [Fluxguard](https:\u002F\u002Ffluxguard.com) — monitor PROD website changes.\n- [@brillout](https:\u002F\u002Ftwitter.com\u002Fbrillout), author of [Vike](https:\u002F\u002Fvike.dev) — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.\n\n### Contributing\n\nPlease review our [contributing guidelines](https:\u002F\u002Fgithub.com\u002Fbrillout\u002Fawesome-react-components\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md). 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.\n\n\u003C!-- START doctoc generated TOC please keep comment here to allow auto update -->\n\u003C!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [UI Components](#ui-components)\n  - [Editable data grid \u002F spreadsheet](#editable-data-grid--spreadsheet)\n  - [Table](#table)\n  - [Infinite Scroll](#infinite-scroll)\n  - [Overlay](#overlay)\n  - [Notification](#notification)\n  - [Tooltip](#tooltip)\n  - [Menu](#menu)\n  - [Sticky](#sticky)\n  - [Tabs](#tabs)\n  - [Loader](#loader)\n  - [Captcha](#captcha)\n  - [Carousel](#carousel)\n  - [Buttons](#buttons)\n  - [Collapse](#collapse)\n  - [Chart](#chart)\n  - [Command palette](#command-palette)\n  - [Tree](#tree)\n  - [UI Navigation](#ui-navigation)\n  - [Custom Scrollbar](#custom-scrollbar)\n  - [Audio \u002F Video](#audio--video)\n  - [Map](#map)\n  - [Time \u002F Date \u002F Age](#time--date--age)\n  - [Photo \u002F Image](#photo--image)\n  - [Icons](#icons)\n  - [Paginator](#paginator)\n  - [Markdown Viewer](#markdown-viewer)\n  - [Canvas](#canvas)\n  - [Screenshot](#screenshot)\n  - [Miscellaneous](#miscellaneous)\n  - [Form Components](#form-components)\n    - [Date \u002F Time picker](#date--time-picker)\n    - [Emoji picker](#emoji-picker)\n    - [Input Types](#input-types)\n    - [Autocomplete](#autocomplete)\n    - [Select](#select)\n    - [Color Picker](#color-picker)\n    - [Toggle](#toggle)\n    - [Slider](#slider)\n    - [Radio Button](#radio-button)\n    - [Type Select](#type-select)\n    - [Tag Input](#tag-input)\n    - [Autosize Input \u002F Textarea](#autosize-input--textarea)\n    - [Star Rating](#star-rating)\n    - [Drag and Drop](#drag-and-drop)\n    - [Sortable List](#sortable-list)\n    - [Rich Text Editor](#rich-text-editor)\n    - [Markdown Editor](#markdown-editor)\n    - [Image Editing](#image-editing)\n    - [Form Component Collections](#form-component-collections)\n    - [Miscellaneous](#miscellaneous-1)\n    - [Syntax Highlight](#syntax-highlight)\n- [UI Layout](#ui-layout)\n- [UI Animation](#ui-animation)\n  - [Parallax](#parallax)\n- [UI Frameworks](#ui-frameworks)\n  - [Responsive](#responsive)\n    - [Material Design](#material-design)\n  - [Mobile](#mobile)\n  - [Component Collections](#component-collections)\n- [UI Utilities](#ui-utilities)\n  - [Reporter](#reporter)\n    - [Visibility Reporter](#visibility-reporter)\n    - [Measurement Reporter](#measurement-reporter)\n  - [Device Input](#device-input)\n    - [Keyboard Events](#keyboard-events)\n    - [Scroll Events](#scroll-events)\n    - [Touch Swipe](#touch-swipe)\n    - [Mouse Events](#mouse-events)\n  - [Meta Tags](#meta-tags)\n  - [Portal](#portal)\n  - [Test User Behavior](#test-user-behavior)\n- [Code Design](#code-design)\n  - [Data Store](#data-store)\n  - [Form Logic](#form-logic)\n  - [Router](#router)\n  - [Props from server](#props-from-server)\n  - [Communication with server](#communication-with-server)\n  - [CSS \u002F Style](#css--style)\n  - [HTML Template](#html-template)\n  - [Isomorphic Apps](#isomorphic-apps)\n  - [Boilerplate](#boilerplate)\n  - [Miscellaneous](#miscellaneous-2)\n- [Utilities](#utilities)\n  - [i18n](#i18n)\n  - [Framework bindings \u002F integrations](#framework-bindings--integrations)\n  - [Integrations with Third Party Services](#integrations-with-third-party-services)\n- [Performance](#performance)\n  - [UI](#ui)\n    - [Inspect](#inspect)\n    - [Lazy Load](#lazy-load)\n  - [App Size](#app-size)\n  - [Server-Side Rendering](#server-side-rendering)\n- [Dev Tools](#dev-tools)\n  - [Test](#test)\n  - [Redux](#redux)\n  - [Inspect](#inspect-1)\n  - [Miscellaneous](#miscellaneous-3)\n- [Miscellaneous](#miscellaneous-4)\n  - [Static Website Generator](#static-website-generator)\n- [Cloud Solutions](#cloud-solutions)\n  - [Databases](#databases)\n\n\u003C!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## UI Components\n\n**[`Back to top ⬆️`](#table-of-contents)**\n\n### Editable data grid \u002F spreadsheet\n\n- [AG Grid](https:\u002F\u002Fgithub.com\u002Fag-grid\u002Fag-grid) - Advanced Data Grid \u002F Data Table supporting Javascript \u002F React \u002F AngularJS \u002F Web Components.\n- [fortune-sheet](https:\u002F\u002Fgithub.com\u002Fruilisi\u002Ffortune-sheet) - An online spreedsheet component that provides out-of-the-box features just like Excel.\n- [gigatables-react](https:\u002F\u002Fgithub.com\u002FGigaTables\u002Freactables) - Sorting, pagination\u002Finfinite scroll, global\u002Fcolumn search, AJAX CRUD, and more.\n- [Handsontable](https:\u002F\u002Fgithub.com\u002Fhandsontable\u002Fhandsontable) - [demo](https:\u002F\u002Fhandsontable.com\u002Fdemo) - [docs](https:\u002F\u002Fhandsontable.com\u002Fdocs\u002Freact-data-grid\u002F) - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.\n- [jqwidgets-react-grid](https:\u002F\u002Fwww.jqwidgets.com\u002Freact\u002Freact-grid\u002F) - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.\n- [MUI X Data grid](https:\u002F\u002Fgithub.com\u002Fmui\u002Fmui-x) - [demo\u002Fdocs](https:\u002F\u002Fmui.com\u002Fx\u002Freact-data-grid\u002F) - Fast and customizable data grid with advanced features for power users and complex use cases.\n- [react-data-grid](https:\u002F\u002Fgithub.com\u002Fadazzle\u002Freact-data-grid) - Excel-like grid.\n- [ReactGrid](https:\u002F\u002Fgithub.com\u002Fsilevis\u002Freactgrid) - [demo\u002Fdocs](https:\u002F\u002Freactgrid.com\u002Fdocs\u002F) - Add spreadsheet-like behavior to your app\n- [revo-grid](https:\u002F\u002Fgithub.com\u002Frevolist\u002Frevogrid) - [demo\u002Fdocs](https:\u002F\u002Frevolist.github.io\u002Frevogrid\u002F) - Powerfull Data Grid for React \u002F AngularJS \u002F Vue \u002F Web Components with advanced customization.\n- [SheetXL](https:\u002F\u002Fgithub.com\u002Fsheetxl\u002Fsheetxl) – A high-performance spreadsheet grid. TypeScript, ESM, Node\u002Fbrowser, Excel-compatible functions.\n- [SVAR React DataGrid](https:\u002F\u002Fsvar.dev\u002Freact\u002Fdatagrid\u002F) - [demo](https:\u002F\u002Fdocs.svar.dev\u002Freact\u002Fgrid\u002Fsamples\u002F#\u002Fbase\u002Fwillow) - [docs](https:\u002F\u002Fdocs.svar.dev\u002Freact\u002Fgrid\u002Fgetting_started\u002F) - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.\n\n### Table\n\n- [ka-table](https:\u002F\u002Fgithub.com\u002Fkomarovalexander\u002Fka-table) - [demo](https:\u002F\u002Fkomarovalexander.github.io\u002Fka-table\u002F#\u002Foverview) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.\n- [mantine-datatable](https:\u002F\u002Fgithub.com\u002Ficflorescu\u002Fmantine-datatable) - [demo\u002Fdocs](https:\u002F\u002Ficflorescu.github.io\u002Fmantine-datatable\u002F) - Lightweight table component for Mantine UI applications, with lots of features\n- [material-table](https:\u002F\u002Fgithub.com\u002Fmbrn\u002Fmaterial-table) - [demo\u002Fdocs](https:\u002F\u002Fmaterial-table.com\u002F) - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing\n- [mui-datatables](https:\u002F\u002Fgithub.com\u002Fgregnb\u002Fmui-datatables) - Built on Material UI. Search, styling, filtering, resize\u002Fhide columns, export, print, select\u002Fexpand rows.\n- [react-data-table](https:\u002F\u002Fgithub.com\u002Fjbetancur\u002Freact-data-table-component) - [demo\u002Fdocs](https:\u002F\u002Fjbetancur.github.io\u002Freact-data-table-component\u002F?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination\n- [TanStack Table](https:\u002F\u002Fgithub.com\u002Ftannerlinsley\u002Freact-table) - [demo](https:\u002F\u002Ftanstack.com\u002Ftable\u002Fv8\u002Fdocs\u002Fexamples\u002Freact\u002Fbasic) - Headless UI for building powerful tables & datagrids\n- [react-table-library](https:\u002F\u002Fgithub.com\u002Ftable-library\u002Freact-table-library) - [demo](https:\u002F\u002Freact-table-library.com\u002F) - React Table Library -- an almost headless table library -- for building better tables.\n- [rsuite-table](https:\u002F\u002Fgithub.com\u002Frsuite\u002Frsuite-table) - [demo\u002Fdocs](http:\u002F\u002Frsuite.github.io\u002Frsuite-table\u002F) - A table component that supports virtualized.\n- [DevExtreme React Grid](https:\u002F\u002Fdevexpress.github.io\u002Fdevextreme-reactive\u002Freact\u002Fgrid\u002F) - High-performance plugin-based data grid for Bootstrap and Material Design.\n- [Smart React Grid](https:\u002F\u002Fhtmlelements.com\u002Freact\u002Fdemos\u002Fgrid\u002Foverview\u002F) - Fast and feature-complete data grid with Material Design.\n- [simple-table](https:\u002F\u002Fgithub.com\u002Fpetera2c\u002Fsimple-table) - [demo](https:\u002F\u002Fwww.simple-table.com\u002Fexamples) - [docs](https:\u002F\u002Fwww.simple-table.com\u002Fdocs) - Lightweight, fast and feature rich. Sorting\u002Ffiltering, virtualization, tree data, nested headers, pinned columns, customized styling etc.\n\n- [KendoReact Grid](https:\u002F\u002Fwww.telerik.com\u002Fkendo-react-ui\u002Fcomponents\u002Fgrid\u002F) - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.\n\n- [Material-React-Table](https:\u002F\u002Fgithub.com\u002FKevinVandy\u002Fmaterial-react-table) - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript\n\n### Infinite Scroll\n\n- [@egjs\u002Freact-infinitegrid](https:\u002F\u002Fgithub.com\u002Fnaver\u002Fegjs-infinitegrid\u002Fblob\u002Fmaster\u002Fpackages\u002Freact-infinitegrid) - [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@egjs\u002Freact-infinitegrid) - [demo](https:\u002F\u002Fnaver.github.io\u002Fegjs-infinitegrid\u002Fstorybook\u002F) - A module used to arrange card elements including content infinitely according to various layout types.\n- [react-lazyload](https:\u002F\u002Fgithub.com\u002Fjasonslyvia\u002Freact-lazyload) - Lazyload your Component, Image or anything else where the performance matters.\n- [react-list](https:\u002F\u002Fgithub.com\u002Forgsync\u002Freact-list) - A versatile infinite scroll React component.\n- [@af-utils\u002Fvirtual](https:\u002F\u002Fgithub.com\u002Fnowaalex\u002Faf-utils) - [demo\u002Fdocs](https:\u002F\u002Faf-utils.com\u002Fvirtual) - Render large scrollable lists and grids.\n- [react-window](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-window) - [demo](https:\u002F\u002Freact-window.now.sh\u002F) - React components for efficiently rendering large lists and tabular data\n- [virtua](https:\u002F\u002Fgithub.com\u002Finokawa\u002Fvirtua) - [demo](https:\u002F\u002Finokawa.github.io\u002Fvirtua\u002F) - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.\n\n### Overlay\n\n_Display overlay \u002F modal \u002F alert \u002F dialog \u002F lightbox \u002F popup_\n\n- [react-aria-modal](https:\u002F\u002Fgithub.com\u002Fdavidtheclark\u002Freact-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.\n- [react-modal](https:\u002F\u002Fgithub.com\u002Freactjs\u002Freact-modal) - Accessible modal dialog component for React.\n- [@paratco\u002Fasync-modal](https:\u002F\u002Fgithub.com\u002FParatco\u002Fasync-modal) - Simple async modal handler for React.\n- [reoverlay](https:\u002F\u002Fgithub.com\u002Fhiradary\u002Freoverlay) - [demo](https:\u002F\u002Fhiradary.github.io\u002Freoverlay\u002F) - The missing solution for managing modals.\n- [sweetalert2](https:\u002F\u002Fgithub.com\u002Fsweetalert2\u002Fsweetalert2) - [demo\u002Fdocs](https:\u002F\u002Fsweetalert2.github.io\u002F) - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.\n- [sweetalert2-react-content](https:\u002F\u002Fgithub.com\u002Fsweetalert2\u002Fsweetalert2-react-content) - Official SweetAlert2 enhancer adding support for React elements as content\n\n### Notification\n\n_Toaster \u002F snackbar — Notify the user with a modeless temporary little popup_\n\n- [react-notifications-component](https:\u002F\u002Fgithub.com\u002Fteodosii\u002Freact-notifications-component) - [demo](https:\u002F\u002Fteodosii.github.io\u002Freact-notifications-component\u002F) - Highly customizable and easy-to-use component for notifications.\n- [notistack](https:\u002F\u002Fiamhosseindhv.com\u002Fnotistack) - [demo](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fiamhosseindhv\u002Fnotistack\u002Ftree\u002Fmaster\u002Fexamples\u002Fsimple-example??hidenavigation=1&module=%2FApp.js) - [docs](https:\u002F\u002Fiamhosseindhv.com\u002Fnotistack\u002Fapi) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other\n- [react-local-toast](https:\u002F\u002Fgithub.com\u002FOlegWock\u002Freact-local-toast) - [demo](https:\u002F\u002Freact-local-toast.netlify.app\u002Fshowcase\u002F) - [docs](https:\u002F\u002Freact-local-toast.netlify.app\u002Ftutorial) - show feedback linked to particular component instead of app-wide toasts.\n- [react-toast](https:\u002F\u002Fgithub.com\u002Fmoharnadreza\u002Freact-toast) - [demo](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fbyqvk) - [docs](https:\u002F\u002Fgithub.com\u002Fmoharnadreza\u002Freact-toast\u002Fblob\u002Fmain\u002FREADME.md) - Minimal toast notifications.\n- 🚀 [react-toastify](https:\u002F\u002Fgithub.com\u002Ffkhadra\u002Freact-toastify) - [demo](https:\u002F\u002Ffkhadra.github.io\u002Freact-toastify\u002F) - best bet out there at the moment. Hooks support. No refs.\n- [react-confirm-lite](https:\u002F\u002Fgithub.com\u002FSaadNasir-git\u002Freact-confirm-lite) - [demo](https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fvitejs-vite-bfthlpmw) - 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.\n- [reapop](https:\u002F\u002Fgithub.com\u002FLouisBarranqueiro\u002Freapop) - A React & Redux notifications system.\n- [react-hot-toast](https:\u002F\u002Fgithub.com\u002Ftimolins\u002Freact-hot-toast) - [demo](https:\u002F\u002Freact-hot-toast.com\u002F) - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.\n- [Sonner](https:\u002F\u002Fsonner.emilkowal.ski\u002F) - An opinionated toast component for React.\n\n### Tooltip\n\n- [react-tooltip](https:\u002F\u002Fgithub.com\u002Fwwayne\u002Freact-tooltip) - React tooltip component.\n\n### Menu\n\n_Menus \u002F sidebars_\n\n- [hamburger-react](https:\u002F\u002Fgithub.com\u002Fluukdv\u002Fhamburger-react) - [demo\u002Fdocs](https:\u002F\u002Fhamburger-react.netlify.app\u002F) - Animated hamburger menu icons for React.\n- [react-burger-menu](https:\u002F\u002Fgithub.com\u002Fnegomi\u002Freact-burger-menu) - An off-canvas sidebar with effects and styles.\n- [react-offcanvas](https:\u002F\u002Fgithub.com\u002Fvutran\u002Freact-offcanvas) - Off-canvas menus for React.\n- [react-planet](https:\u002F\u002Fgithub.com\u002FinnFactory\u002Freact-planet) - [demo](https:\u002F\u002Finnfactory.github.io\u002Freact-planet\u002F) - Create circular menus which looks like planets.\n- [mantine-contextmenu](https:\u002F\u002Fgithub.com\u002Ficflorescu\u002Fmantine-contextmenu) - [demo\u002Fdocs](https:\u002F\u002Ficflorescu.github.io\u002Fmantine-contextmenu\u002F) - Context-menu hook\u002Fcomponent for applications built with Mantine UI.\n\n### Sticky\n\n_Fixed headers \u002F scroll-up headers \u002F sticky elements_\n\n- [react-headroom](https:\u002F\u002Fgithub.com\u002FKyleAMathews\u002Freact-headroom) - Hide your header until you need it.\n- [react-stickynode](https:\u002F\u002Fgithub.com\u002Fyahoo\u002Freact-stickynode) - A performant and comprehensive React sticky.\n\n### Tabs\n\n- [react-tabs](https:\u002F\u002Fgithub.com\u002Freactjs\u002Freact-tabs) - React tabs component.\n- [react-tabtab](https:\u002F\u002Fgithub.com\u002Fctxhou\u002Freact-tabtab) - React, tabs.\n\n### Loader\n\n_Loaders \u002F spinners \u002F progress bars — Let the user know that something is loading_\n\n- [react-loader-spinner](https:\u002F\u002Fgithub.com\u002Fmhnpd\u002Freact-loader-spinner) - Collection set of react-spinner for async operation.\n- [react-redux-loading-bar](https:\u002F\u002Fgithub.com\u002Fmironov\u002Freact-redux-loading-bar) - Simple Loading Bar for Redux and React.\n- [react-spinners-css](https:\u002F\u002Fgithub.com\u002FJoshK2\u002Freact-spinners-css) - Amazing collection of react spinners components.\n- [react-spinners](https:\u002F\u002Fgithub.com\u002Fdavidhu2000\u002Freact-spinners) - A collection of loading spinner components for react.\n- [react-content-loader](https:\u002F\u002Fgithub.com\u002Fdanilowoz\u002Freact-content-loader) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).\n\n### Captcha\n\n- [react-simple-captcha](https:\u002F\u002Fgithub.com\u002Fmasroorejaz\u002Freact-simple-captcha) - [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-simple-captcha) - [demo](https:\u002F\u002Fwww.scriptse.com\u002Fblog\u002Fadd-captcha-in-reactjs-application\u002Freact-simple-captcha-demo\u002F) - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.\n- [procaptcha](https:\u002F\u002Fgithub.com\u002Fprosopo\u002Fcaptcha) - [demo](https:\u002F\u002Fprosopo.io\u002F) - [docs](https:\u002F\u002Fdocs.prosopo.io\u002F) - Privacy focused free CAPTCHA\n\n### Carousel\n\n- [@egjs\u002Freact-flicking](https:\u002F\u002Fgithub.com\u002Fnaver\u002Fegjs-flicking\u002Fblob\u002Fmaster\u002Fpackages\u002Freact-flicking\u002F) - [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@egjs\u002Freact-flicking) - [demo](https:\u002F\u002Fnaver.github.io\u002Fegjs-flicking\u002F) - It's reliable, flexible and extendable carousel.\n- [react-awesome-slider](https:\u002F\u002Fgithub.com\u002Frcaferati\u002Freact-awesome-slider) - [demo](https:\u002F\u002Ffullpage.caferati.me\u002F) - Fullpage, 3D animated, 60fps media and content slider\u002Fcarousel.\n- [pure-react-carousel](https:\u002F\u002Fgithub.com\u002Fexpress-labs\u002Fpure-react-carousel) - Built from scratch and not highly opinionated.\n- [react-id-swiper](https:\u002F\u002Fgithub.com\u002Fkidjp85\u002Freact-id-swiper) - A library to use idangerous Swiper as a ReactJs component\n- [react-instagram-zoom-slider](https:\u002F\u002Fgithub.com\u002Fskozer\u002Freact-instagram-zoom-slider) - [demo](https:\u002F\u002Fskozer.github.io\u002Freact-instagram-zoom-slider\u002F) - A slider component with pinch to zoom capabilities inspired by Instagram.\n- [react-responsive-carousel](https:\u002F\u002Fgithub.com\u002Fleandrowd\u002Freact-responsive-carousel) - React.js Responsive Carousel (with Swipe).\n- [react-slick](https:\u002F\u002Fgithub.com\u002Fakiran\u002Freact-slick) - React carousel component.\n- [keen-slider](https:\u002F\u002Fgithub.com\u002Frcbyr\u002Fkeen-slider) - [demo](https:\u002F\u002Fkeen-slider.io\u002Fexamples\u002F#examples) - Performant carousel\u002Fslider with native touch\u002Fswipe behavior.\n- [swiper](https:\u002F\u002Fgithub.com\u002Fnolimits4web\u002FSwiper) - [demo](https:\u002F\u002Fswiperjs.com\u002Fdemos) - [docs](https:\u002F\u002Fswiperjs.com\u002Freact) - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.\n\n### Buttons\n\n- [react-awesome-button](https:\u002F\u002Fgithub.com\u002Frcaferati\u002Freact-awesome-button) - [demo](https:\u002F\u002Fcaferati.me\u002Fdemo\u002Freact-awesome-button) - 3D animated 60fps buttons with load progress and social share actions.\n- [reactive-button](https:\u002F\u002Fgithub.com\u002Farifszn\u002Freactive-button) - [demo](https:\u002F\u002Farifszn.github.io\u002Freactive-button\u002Fdocs\u002Fplayground) - [docs](https:\u002F\u002Farifszn.github.io\u002Freactive-button) - A beautiful animated button component with progress indicator.\n\n### Collapse\n\n- [react-accessible-accordion](https:\u002F\u002Fgithub.com\u002Fspringload\u002Freact-accessible-accordion) - Accessible Accordion component for React.\n- [react-collapse](https:\u002F\u002Fgithub.com\u002Fnkbt\u002Freact-collapse) - Component-wrapper for collapse animation with react-motion.\n- [react-tabbordion](https:\u002F\u002Fgithub.com\u002FMerri\u002Freact-tabbordion) - [demo](https:\u002F\u002Fmerri.github.io\u002Freact-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs.\n\n### Chart\n\n_Display data in charts \u002F graphs \u002F diagrams_\n\n- [essential js 2 charts](https:\u002F\u002Fgithub.com\u002Fsyncfusion\u002Fej2-react-ui-components\u002Ftree\u002Fmaster\u002Fcomponents\u002Fcharts) - Beautiful and interactive charts & graphs for react.\n- [EazyChart](https:\u002F\u002Fgithub.com\u002FHexastack\u002Feazychart) - [demo](https:\u002F\u002Fdocs.eazychart.com\u002F#demos) - [docs](https:\u002F\u002Fdocs.eazychart.com) - Easily transform data into meaningful charts\n- [echarts for react](https:\u002F\u002Fgithub.com\u002Fhustcc\u002Fecharts-for-react) - Wrapper around beautiful Apache Echarts\n- [jscharting-react](https:\u002F\u002Fgithub.com\u002Fjscharting\u002Fjscharting-react) – React chart component offering a complete set of chart types and engaging data visualizations with [JSCharting](https:\u002F\u002Fjscharting.com\u002F).\n- [react-chartist](https:\u002F\u002Fgithub.com\u002Ffraserxu\u002Freact-chartist) - React component for Chartist.js.\n- [react-charty](https:\u002F\u002Fgithub.com\u002F99ff00\u002Freact-charty) - [demo](https:\u002F\u002F99ff00.github.io\u002Freact-charty\u002F) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.\n- [react-chartjs-2](https:\u002F\u002Fgithub.com\u002Fjerairrest\u002Freact-chartjs-2) - Common react charting components using Chart.js 2.0.\n- [react-d3-components](https:\u002F\u002Fgithub.com\u002Fcodesuki\u002Freact-d3-components) - D3 Components for React.\n- [react-google-charts](https:\u002F\u002Fgithub.com\u002FRakanNimer\u002Freact-google-charts) - React-google-charts React component.\n- [react-highcharts](https:\u002F\u002Fgithub.com\u002Fkirjs\u002Freact-highcharts) - React-highcharts.\n- [react-sparklines](https:\u002F\u002Fgithub.com\u002Fborisyankov\u002Freact-sparklines) - Beautiful and expressive Sparklines React component.\n- [react-timeseries-charts](https:\u002F\u002Fgithub.com\u002Fesnet\u002Freact-timeseries-charts) - Declarative timeseries charts.\n- [react-vis](https:\u002F\u002Fgithub.com\u002Fuber\u002Freact-vis) - Data visualization library based on React and d3.\n- [recharts](https:\u002F\u002Fgithub.com\u002Frecharts\u002Frecharts) - Redefined chart library built with React and D3.\n- [rumble-charts](https:\u002F\u002Fgithub.com\u002Frumble-charts\u002Frumble-charts) - React components for building composable and flexible charts.\n- [victory](https:\u002F\u002Fgithub.com\u002FFormidableLabs\u002Fvictory) - Data viz for React.\n- [semiotic](https:\u002F\u002Fsemiotic.nteract.io\u002F) - Semiotic is a data visualization framework for React.\n- [SVAR React Gantt](https:\u002F\u002Fsvar.dev\u002Freact\u002Fgantt\u002F) - [demo](https:\u002F\u002Fdocs.svar.dev\u002Freact\u002Fgantt\u002Fsamples\u002F#\u002Fbase\u002Fwillow) - [docs](https:\u002F\u002Fdocs.svar.dev\u002Freact\u002Fgantt\u002Fgetting_started\u002F) - Customizable, interactive Gantt chart component\n- [DevExtreme React Chart](https:\u002F\u002Fdevexpress.github.io\u002Fdevextreme-reactive\u002Freact\u002Fchart\u002F) - High-performance plugin-based chart for Bootstrap and Material Design.\n- [Smart React Chart](https:\u002F\u002Fwww.htmlelements.com\u002Freact\u002Fdemos\u002Fchart\u002Foverview\u002F) - Feature complete Charting library.\n- [react-muze](https:\u002F\u002Fgithub.com\u002Fchartshq\u002Freact-muze) - React wrapper for [muze](https:\u002F\u002Fmuzejs.org\u002F)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)\n- [Flowchart React](https:\u002F\u002Fgithub.com\u002Fjoyceworks\u002Fflowchart-react) - Flowchart & Flowchart designer for React.js.\n- [react-dashboard](https:\u002F\u002Fgithub.com\u002Fflatlogic\u002Freact-dashboard) - Isomorphic Dashboards.\n\n### Command palette\n\n- [cmdk](https:\u002F\u002Fcmdk.paco.me\u002F) - Fast, composable, unstyled command menu for React.\n- [kbar](https:\u002F\u002Fgithub.com\u002Ftimc1\u002Fkbar) - [demo](https:\u002F\u002Fkbar.vercel.app) - Fast, portable, and extensible cmd+k interface.\n\n### Tree\n\n_Display a tree data structure_\n\n- [json-edit-react](https:\u002F\u002Fgithub.com\u002FCarlosNZ\u002Fjson-edit-react) - [demo](https:\u002F\u002Fcarlosnz.github.io\u002Fjson-edit-react\u002F) - Highly configurable JSON\u002FObject tree viewer and editor\n- [react-arborist](https:\u002F\u002Fgithub.com\u002Fbrimdata\u002Freact-arborist) - [demo](https:\u002F\u002Freact-arborist.netlify.app\u002F) - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search\n- [react-complex-tree](https:\u002F\u002Fgithub.com\u002Flukasbach\u002Freact-complex-tree) - [demo](https:\u002F\u002Frct.lukasbach.com\u002F) - [docs](https:\u002F\u002Frct.lukasbach.com\u002Fdocs\u002Fgetstarted) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search\n- [he-tree-react](https:\u002F\u002Fgithub.com\u002Fphphe\u002Fhe-tree-react) - [demo](https:\u002F\u002Fhe-tree-react.phphe.com\u002Fv1\u002Fexamples) - [docs](https:\u002F\u002Fhe-tree-react.phphe.com\u002F) - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.\n\n### UI Navigation\n\n_Ways to navigate views_\n\n- [react-scroll](https:\u002F\u002Fgithub.com\u002Ffisshy\u002Freact-scroll) - React scroll component.\n- [react-swipeable-views](https:\u002F\u002Fgithub.com\u002Foliviertassinari\u002Freact-swipeable-views) - A React Component for binded Tabs and Swipeable Views.\n\n### Custom Scrollbar\n\n- [rc-scrollbars](https:\u002F\u002Fgithub.com\u002Fsakhnyuk\u002Frc-scrollbars) - [demo](https:\u002F\u002Frc-scrollbars.vercel.app\u002F) - Customizable scrollbars with flex options and 60FPS\n- [react-custom-scroll](https:\u002F\u002Fgithub.com\u002Frommguy\u002Freact-custom-scroll) - [demo](http:\u002F\u002Frommguy.github.io\u002Freact-custom-scroll\u002Fexample\u002Fdemo.html) - Easily customize the browser scroll bar with native OS scroll behavior.\n- [react-shadow-scroll](https:\u002F\u002Fgithub.com\u002Fandrelmlins\u002Freact-shadow-scroll) - Component that customizes the image and inserts shadow when scrolling exists.\n\n### Audio \u002F Video\n\n- [react-dailymotion](https:\u002F\u002Fgithub.com\u002Fu-wave\u002Freact-dailymotion) - Dailymotion player component for React.\n- [react-player](https:\u002F\u002Fgithub.com\u002FCookPete\u002Freact-player) - A react component for playing a variety of URLs, including YouTube.\n- [react-soundplayer](https:\u002F\u002Fgithub.com\u002Fsoundblogs\u002Freact-soundplayer) - Create custom SoundCloud players with React.\n- [react-youtube](https:\u002F\u002Fgithub.com\u002Ftroybetz\u002Freact-youtube) - React.js powered YouTube player component.\n- [video-react](https:\u002F\u002Fgithub.com\u002Fvideo-react\u002Fvideo-react) - A web video player built for the HTML5 world using React library.\n- [material-ui-audio-player](https:\u002F\u002Fgithub.com\u002FWerter12\u002Fmaterial-ui-audio-player) - Audio player for material ui design.\n- [react-vision-camera](https:\u002F\u002Fgithub.com\u002Fxulihang\u002Freact-vision-camera) - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.\n- [react-barcode-qrcode-scanner](https:\u002F\u002Fgithub.com\u002Fxulihang\u002Freact-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.\n\n### Map\n\n- [google-map-react](https:\u002F\u002Fgithub.com\u002Fistarkov\u002Fgoogle-map-react) - Universal google map react component, allows render react components on the google map.\n- [mapkit](https:\u002F\u002Fgithub.com\u002F1amageek\u002Fmapkit) - A library for integrating Apple Maps using MapKit JS, with annotations, overlays, and search.\n- [pigeon-maps](https:\u002F\u002Fgithub.com\u002Fmariusandra\u002Fpigeon-maps) - [demo](https:\u002F\u002Fpigeon-maps.js.org\u002F) - ReactJS Maps without external dependencies.\n- [react-geosuggest](https:\u002F\u002Fgithub.com\u002Fubilabs\u002Freact-geosuggest) - A React autosuggest for the Google Maps Places API.\n- [react-leaflet](https:\u002F\u002Fgithub.com\u002FPaulLeCam\u002Freact-leaflet) - React components for Leaflet maps.\n- [react-map-gl](https:\u002F\u002Fgithub.com\u002Fuber\u002Freact-map-gl) - A React wrapper for MapboxGL-js and overlay API.\n- [react-svg-map](https:\u002F\u002Fgithub.com\u002FVictorCazanave\u002Freact-svg-map) - [demo](https:\u002F\u002Fvictorcazanave.github.io\u002Freact-svg-map\u002F) - A set of components to display an interactive SVG map.\n\n### Time \u002F Date \u002F Age\n\n_Display time \u002F date \u002F age_\n\n- [react-timeago](https:\u002F\u002Fgithub.com\u002Fnmn\u002Freact-timeago) - A simple time-ago component for ReactJs.\n- [timeago-react](https:\u002F\u002Fgithub.com\u002Fhustcc\u002Ftimeago-react) - Format date with `*** time ago` statement. eg: '3 hours ago'.\n- [react-google-flight-datepicker](https:\u002F\u002Fgithub.com\u002FJSLancerTeam\u002Freact-google-flight-datepicker) - Google flight date picker implemented in ReactJS.\n\n### Photo \u002F Image\n\n_Display images \u002F photos_\n\n- [lightGallery](https:\u002F\u002Fgithub.com\u002Fsachinchoolur\u002FlightGallery) - [demo](https:\u002F\u002Fwww.lightgalleryjs.com\u002F) - [docs](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Freact\u002F) - Full-featured lightbox gallery component.\n- [react-compare-image](https:\u002F\u002Fgithub.com\u002Fjunkboy0315\u002Freact-compare-image) - [demo](https:\u002F\u002Freact-compare-image.yuuniworks.com\u002F) - React component to compare two images using a slider.\n- [react-image-gallery](https:\u002F\u002Fgithub.com\u002Fxiaolin\u002Freact-image-gallery) - Responsive image gallery, carousel, image slider react component.\n- [yet-another-react-lightbox](https:\u002F\u002Fgithub.com\u002Figordanchenko\u002Fyet-another-react-lightbox) - [demo](https:\u002F\u002Fyet-another-react-lightbox.com\u002Fexamples) - [docs](https:\u002F\u002Fyet-another-react-lightbox.com\u002Fdocumentation) - React lightbox component.\n- [react-intense](https:\u002F\u002Fgithub.com\u002Fbrycedorn\u002Freact-intense) - A React component for viewing large images up close.\n- [react-photo-album](https:\u002F\u002Fgithub.com\u002Figordanchenko\u002Freact-photo-album) - [demo](https:\u002F\u002Freact-photo-album.com\u002Fexamples) - [docs](https:\u002F\u002Freact-photo-album.com\u002Fdocumentation) - Responsive React Photo Gallery.\n- [react-svg-pan-zoom](https:\u002F\u002Fgithub.com\u002Fchrvadala\u002Freact-svg-pan-zoom) - A React component that adds pan and zoom features to SVG.\n- [react-particle-image](https:\u002F\u002Fgithub.com\u002Fmalerba118\u002Freact-particle-image) - [demo](https:\u002F\u002Fmalerba118.github.io\u002Freact-particle-image-demo\u002F) - Render images as interactive particles.\n- [react-imgix](https:\u002F\u002Fgithub.com\u002Fimgix\u002Freact-imgix) - Add fast, responsive images as an image, picture, or background!\n- [@frameright\u002Freact-image-display-control](https:\u002F\u002Fgithub.com\u002FFrameright\u002Freact-image-display-control) - Define zoom regions for smart responsive images.\n- [zoom-image](https:\u002F\u002Fgithub.com\u002Fwillnguyen1312\u002Fzoom-image) - [demo](https:\u002F\u002Fwillnguyen1312.github.io\u002Fzoom-image\u002Fexamples\u002Freact.html) - [docs](https:\u002F\u002Fwillnguyen1312.github.io\u002Fzoom-image) - A little yet powerful framework agnostic library to zoom image on the web\n- [react-infinite-gallery](https:\u002F\u002Fgithub.com\u002FAlirezaAzizi145\u002Freact-infinite-gallery) – Infinite-scroll image gallery component for React apps.\n\n### Icons\n\n_Display icons \u002F icon set \u002F emojis_\n\n- [iconify-react](https:\u002F\u002Fgithub.com\u002Ficonify\u002Ficonify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.\n- [react-icons](https:\u002F\u002Fgithub.com\u002Fgorangajic\u002Freact-icons) - Svg react icons of popular icon packs using ES6 imports.\n- [react-open-doodles](https:\u002F\u002Fgithub.com\u002Flunahq\u002Freact-open-doodles) - Awesome free illustrations as react components.\n- [react-icomoon](https:\u002F\u002Fgithub.com\u002Faykutkardas\u002Freact-icomoon) - With react-icomoon you can easily use the icons you have selected or created in icomoon.\n- [tabler-icons-react](https:\u002F\u002Ftabler-icons-react.vercel.app) - A set of over 450 free MIT-licensed high-quality SVG icons.\n- [Lucide](https:\u002F\u002Fgithub.com\u002Flucide-icons\u002Flucide) - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.\n\n### Paginator\n\n_Display a control element to paginate_\n\n- [react-paginate](https:\u002F\u002Fgithub.com\u002FAdeleD\u002Freact-paginate) - A ReactJS component that creates a pagination.\n- [react-laravel-paginex](https:\u002F\u002Fgithub.com\u002Flionix-team\u002Freact-laravel-paginex) - Laravel Pagination with ReactJS (customizable).\n- [paginated](https:\u002F\u002Fgithub.com\u002Fmakotot\u002Fpaginated) - React render props & custom hook to build pagination.\n- [react-steps](https:\u002F\u002Fgithub.com\u002Ftkwant\u002Freact-steps) - [Demo](https:\u002F\u002Fstepper.tkwant.de\u002F) - Responsive React Stepper.\n\n### Markdown Viewer\n\n_Display parsed markdow source_\n\n- [react-markdown](https:\u002F\u002Fgithub.com\u002Frexxars\u002Freact-markdown) - Render Markdown as React components.\n\n### Canvas\n\n_Sketch input using Canvas or SVG_\n\n- [react-konva](https:\u002F\u002Fgithub.com\u002Fkonvajs\u002Freact-konva) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.\n- [react-sketch](https:\u002F\u002Fgithub.com\u002Ftbolis\u002Freact-sketch) - A Sketch tool for React based applications, backed-up by FabricJS\n- [react-sketch-canvas](https:\u002F\u002Fgithub.com\u002Fvinothpandian\u002Freact-sketch-canvas) - [Demo](https:\u002F\u002Fvinoth.info\u002Freact-sketch-canvas\u002F?path=\u002Fstory\u002F*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets\n- [react-heat-map](https:\u002F\u002Fgithub.com\u002Fuiwjs\u002Freact-heat-map) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.\n\n### Screenshot\n\n- [html2canvas](https:\u002F\u002Fgithub.com\u002Fniklasvh\u002Fhtml2canvas) - Take screenshots of any part of your web page using Javascript.\n\n### Miscellaneous\n\n- [puck](https:\u002F\u002Fgithub.com\u002Fmeasuredco\u002Fpuck) - [demo](https:\u002F\u002Fpuck-editor-demo.vercel.app\u002Fedit) - The self-hosted visual editor for React\n- [react-advanced-news-ticker](https:\u002F\u002Fgithub.com\u002Fahmetcanaydemir\u002Freact-advanced-news-ticker) - [demo](https:\u002F\u002Fwww.ahmetcanaydemir.com\u002Freact-advanced-news-ticker\u002F) - A flexible and animated vertical news ticker component\n- [react-avatar-generator](https:\u002F\u002Fgithub.com\u002FJosephSmith127\u002Freact-avatar-generator) - Allows users to create random kaleidoscopes to be used as avatars.\n- [react-awesome-query-builder](https:\u002F\u002Fgithub.com\u002Fukrbublik\u002Freact-awesome-query-builder) - [demo](https:\u002F\u002Fukrbublik.github.io\u002Freact-awesome-query-builder\u002F) - Visual query builder from form fields, with SQL, MongoDB and JSON export\n- [react-blur](https:\u002F\u002Fgithub.com\u002Fjavierbyte\u002Freact-blur) - React component for blurred backgrounds.\n- [react-demo-tab](https:\u002F\u002Fgithub.com\u002Fmkosir\u002Freact-demo-tab) - [demo](https:\u002F\u002Fmkosir.github.io\u002Freact-demo-tab) - A React component to easily create demos of other components.\n- [fastcomments-react](https:\u002F\u002Fgithub.com\u002Ffastcomments\u002Ffastcomments-react) - [demo](\u003Chttps:\u002F\u002Fblog.fastcomments.com\u002F(12-30-2019)-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA.\n- [react-pdf-viewer](https:\u002F\u002Fgithub.com\u002Fphuoc-ng\u002Freact-pdf-viewer) - [docs](https:\u002F\u002Freact-pdf-viewer.dev) - A React component to view a PDF document.\n- [react-simple-chatbot](https:\u002F\u002Fgithub.com\u002FLucasBassetti\u002Freact-simple-chatbot) - [demo](https:\u002F\u002Fgithub.com\u002Fanishagg17\u002FPIzzaBuilder) - A simple chatbot component to create conversation chats.\n- [react-file-reader-input](https:\u002F\u002Fgithub.com\u002Fngokevin\u002Freact-file-reader-input) - File input component for control for file reading styling and abstraction.\n- [react-filter-control](https:\u002F\u002Fgithub.com\u002Fkomarovalexander\u002Freact-filter-control) - The React filterbuilder component for building the filter criteria in the UI.\n- [react-headings](https:\u002F\u002Fgithub.com\u002Falexnault\u002Freact-headings) - Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered.\n- [react-joyride](https:\u002F\u002Fgithub.com\u002Fgilbarbara\u002Freact-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.\n- [react-mouse-select](https:\u002F\u002Fgithub.com\u002Fandreizanik\u002Freact-mouse-select) - [Demo](https:\u002F\u002Fandreizanik.github.io\u002Freact-mouse-select\u002F) A component that allows selecting DOM elements by moving the mouse\n- [react-resizable-and-movable](https:\u002F\u002Fgithub.com\u002Fbokuweb\u002Freact-resizable-and-movable) - Resizable and movable component for React.\n- [react-resizable-box](https:\u002F\u002Fgithub.com\u002Fbokuweb\u002Freact-resizable-box) - Resizable component for React. #reactjs.\n- [react-searchbox-awesome](https:\u002F\u002Fgithub.com\u002Faxmz\u002Freact-searchbox-awesome) - [demo](https:\u002F\u002Faxmz.github.io\u002Freact-searchbox-awesome-page\u002F) - Minimalistic searchbox.\n- [react-split-pane](https:\u002F\u002Fgithub.com\u002Ftomkp\u002Freact-split-pane) - React split-pane component.\n- [react-swipe-to-delete-ios](https:\u002F\u002Fgithub.com\u002Farnaudambro\u002Freact-swipe-to-delete-ios) - [demo](https:\u002F\u002Farnaudambro.github.io\u002Freact-swipe-to-delete-ios\u002F) - To delete an item in a list the same way iOS does.\n- [react-swipeable-list](https:\u002F\u002Fgithub.com\u002Fmarekrozmus\u002Freact-swipeable-list) - [demo](https:\u002F\u002Fmarekrozmus.github.io\u002Freact-swipeable-list\u002F) - Configurable component to render list with swipeable items.\n- [typography](https:\u002F\u002Fgithub.com\u002FKyleAMathews\u002Ftypography.js) - A powerful toolkit for building websites with beautiful typography.\n- [react-pulse-text](https:\u002F\u002Fgithub.com\u002FKelsier90\u002FReact-Pulse-Text) - [demo\u002Fdocs](https:\u002F\u002Fkelsier90.github.io\u002FReact-Pulse-Text\u002F) - Allows you to animate the text of any property of another component.\n- [captcha-image](https:\u002F\u002Fgithub.com\u002Ftpkahlon\u002Fcaptcha-image) - Allows you to generate a random captcha image with options.\n- [react-pdf](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf) - Display PDFs in your React app as easily as if they were images.\n- [react-customizable-chat-bot](https:\u002F\u002Fgithub.com\u002Fchithakumar13\u002Freact-chat-bot) - [Demo](https:\u002F\u002Fchithakumar13.github.io\u002Fbot-example) - Build your own chatbot matching your brand needs in minutes.\n- [@restpace\u002Fschema-form](https:\u002F\u002Fgithub.com\u002Frestspace\u002Fschema-form) - [Demo](https:\u002F\u002Frestspace.io\u002Freact\u002Fschema-form\u002Fdemo) - Easily build complex forms automatically from a JSON Schema.\n- [react-darkreader](https:\u002F\u002Fgithub.com\u002FTurkyden\u002Freact-darkreader) - A React Hook for adding a dark \u002F night mode to your site inspired by darkreader.\n- [react-apple-signin-auth](https:\u002F\u002Fgithub.com\u002FA-Tokyo\u002Freact-apple-signin-auth) - Apple signin for React using the official Apple JS SDK.\n- [react-mrz-scanner](https:\u002F\u002Fgithub.com\u002Ftony-xlh\u002Freact-mrz-scanner) - A React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer.\n\n### Form Components\n\n_Let the user enter data_\n\n#### Date \u002F Time picker\n\n_Date picker \u002F time picker \u002F datetime picker \u002F date range picker_\n\n- [date-range-picker](https:\u002F\u002Fgithub.com\u002Falmogtavor\u002Fdate-range-picker) - [demo](https:\u002F\u002Falmogtavor.github.io\u002Fdate-range-picker\u002F) - A calendar component that supports date, range & ranges picks.\n- [react-big-calendar](https:\u002F\u002Fgithub.com\u002Fintljusticemission\u002Freact-big-calendar) - Gcal\u002Foutlook like calendar component.\n- [react-datepicker](https:\u002F\u002Fgithub.com\u002FHacker0x01\u002Freact-datepicker) - A simple and reusable datepicker component for React.\n- [react-day-picker](https:\u002F\u002Fgithub.com\u002Fgpbl\u002Freact-day-picker) - Flexible date picker for React.\n- [react-flatpickr](https:\u002F\u002Fgithub.com\u002Fcoderhaoxin\u002Freact-flatpickr) - Flatpickr for React.\n- [react-simple-timefield](https:\u002F\u002Fgithub.com\u002Fantonfisher\u002Freact-simple-timefield) - [demo](https:\u002F\u002Fantonfisher.com\u002Freact-simple-timefield\u002F) - Simple time input field.\n- [react-timezone-select](https:\u002F\u002Fgithub.com\u002Fndom91\u002Freact-timezone-select) - [demo](https:\u002F\u002Fndom91.github.io\u002Freact-timezone-select\u002F) - Dynamic, succinct timezone select. Based on `react-select`.\n- [DevExtreme React Scheduler](https:\u002F\u002Fdevexpress.github.io\u002Fdevextreme-reactive\u002Freact\u002Fscheduler\u002F) - High-performance plugin-based scheduler\u002Fcalendar for Material Design.\n- [jQWidgets Scheduler](https:\u002F\u002Fwww.jqwidgets.com\u002Freact\u002Freact-scheduler\u002F) - Feature complete Scheduling library.\n- [react-calendar](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-calendar) - Ultimate calendar for your React app.\n- [react-date-picker](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-date-picker) - A date picker for your React app.\n- [schedule-x](https:\u002F\u002Fgithub.com\u002Fschedule-x\u002Fschedule-x) - Material design event calendar and date picker components. Demo site: https:\u002F\u002Fschedule-x.dev\u002F\n\n#### Emoji picker\n\n- [interweave-emoji-picker](https:\u002F\u002Fgithub.com\u002Fmilesj\u002Finterweave\u002Ftree\u002Fmaster\u002Fpackages\u002Femoji-picker) - A React based emoji picker powered by Interweave and Emojibase.\n\n#### Input Types\n\n_Masked inputs, specialized inputs; email \u002F telephone number \u002F credit card \u002F etc._\n\n- [react-credit-cards](https:\u002F\u002Fgithub.com\u002Famarofashion\u002Freact-credit-cards) - Beautiful credit cards for your payment forms.\n- [react-payment-inputs](https:\u002F\u002Fgithub.com\u002Fmedipass\u002Freact-payment-inputs) - [demo](https:\u002F\u002Fmedipass.github.io\u002Freact-payment-inputs\u002F?path=\u002Fstory\u002Fusepaymentinputs--basic-no-styles) - A zero-dependency container to help with payment card input fields.\n- [react-input-mask](https:\u002F\u002Fgithub.com\u002Fsanniassin\u002Freact-input-mask) - [demo](http:\u002F\u002Fsanniassin.github.io\u002Freact-input-mask\u002Fdemo.html) - Yet another react component for input masking.\n- [@lunasec\u002Freact-sdk](https:\u002F\u002Fgithub.com\u002Flunasec-io\u002Flunasec) - [docs](https:\u002F\u002Fwww.lunasec.io\u002Fdocs\u002F) - Secure, hardened form components that encrypt\u002Ftokenize all data automatically.\n- [react-numpad](https:\u002F\u002Fgithub.com\u002Fgpietro\u002Freact-numpad) - [demo](https:\u002F\u002Fgpietro.github.io\u002Freact-numpad-demo\u002F) - Extensible number pad control for numbers, dates and times.\n- [react-multi-email](https:\u002F\u002Fgithub.com\u002Faxisj\u002Freact-multi-email) - [demo](https:\u002F\u002Freact-multi-email.vercel.app\u002F) - Format multiple emails as the user types.\n\n#### Autocomplete\n\n_Autosuggest \u002F autocomplete \u002F typeahead_\n\n- [react-autosuggest](https:\u002F\u002Fgithub.com\u002Fmoroshko\u002Freact-autosuggest) - WAI-ARIA compliant React autosuggest component.\n- [react-typeahead](https:\u002F\u002Fgithub.com\u002Ffmoo\u002Freact-typeahead) - Pure react-based typeahead and typeahead-tokenizer.\n\n#### Select\n\n- [react-aria-menubutton](https:\u002F\u002Fgithub.com\u002Fdavidtheclark\u002Freact-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button.\n- [react-functional-select](https:\u002F\u002Fgithub.com\u002Fbased-ghost\u002Freact-functional-select) - [demo](https:\u002F\u002Fbased-ghost.github.io\u002Freact-functional-select\u002F) - Micro-sized & micro-optimized select component for React.js.\n- [react-mobile-picker](https:\u002F\u002Fgithub.com\u002Fadcentury\u002Freact-mobile-picker) - [demo](https:\u002F\u002Freact-mobile-picker.vercel.app\u002F) - An iOS like select box component.\n- [react-select](https:\u002F\u002Fgithub.com\u002FJedWatson\u002Freact-select) - A Select control built with and for React JS.\n- [react-column-select](https:\u002F\u002Fgithub.com\u002Fchr-ge\u002Freact-column-select) - A column select component built for react.\n- [react-select-search](https:\u002F\u002Fgithub.com\u002Ftbleckert\u002Freact-select-search) - [demo](https:\u002F\u002Freact-select-search.com\u002F) - A lightweight select component for React\n\n#### Color Picker\n\n- [coloreact](https:\u002F\u002Fgithub.com\u002Felrumordelaluz\u002Fcoloreact) - A tiny Color Picker for React.\n- [react-color](https:\u002F\u002Fgithub.com\u002Fuiwjs\u002Freact-color) - Is a tiny color picker widget component for React apps.\n- [react-colorful](https:\u002F\u002Fgithub.com\u002Fomgovich\u002Freact-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.\n- [react-input-color](https:\u002F\u002Fgithub.com\u002Fwangzuo\u002Freact-input-color) - React input color component with hsv color picker.\n\n#### Toggle\n\n- [@anatoliygatt\u002Fheart-switch](https:\u002F\u002Fgithub.com\u002Fanatoliygatt\u002Fheart-switch) - [demo](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdemo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component.\n- [react-ios-switch](https:\u002F\u002Fgithub.com\u002Fclari\u002Freact-ios-switch) - React switch component.\n- [react-toggle](https:\u002F\u002Fgithub.com\u002Finstructure-react\u002Freact-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox.\n- [ui-switch](https:\u002F\u002Fgithub.com\u002FyairEO\u002Fui-switch) - The most complete _Toggle_ component\n\n#### Slider\n\n- [react-slider](https:\u002F\u002Fgithub.com\u002Fmpowaga\u002Freact-slider) - Slider component for React.\n\n#### Radio Button\n\n- [react-radio-group](https:\u002F\u002Fgithub.com\u002Fchenglou\u002Freact-radio-group) - Better radio buttons.\n\n#### Type Select\n\n_Let the user select something (e.g. a tag) while typing_\n\n- [react-autocomplete-input](https:\u002F\u002Fgithub.com\u002Fyury-dymov\u002Freact-autocomplete-input) - Autocomplete input field for React.\n- [react-mentions](https:\u002F\u002Fgithub.com\u002Feffektif\u002Freact-mentions) - Mention people in a textarea.\n- [rich-textarea](https:\u002F\u002Fgithub.com\u002Finokawa\u002Frich-textarea) - A textarea to colorize, highlight, decorate texts and offer autocomplete.\n\n#### Tag Input\n\n_Let the user add multiple tags in a single input_\n\n- [react-tag-input](https:\u002F\u002Fgithub.com\u002Fprakhar1989\u002Freact-tags) - A fantastically simple tagging component for your React projects.\n- [react-tagsinput](https:\u002F\u002Fgithub.com\u002Folahol\u002Freact-tagsinput) - A simple react component for inputing tags.\n- [react-tokeninput](https:\u002F\u002Fgithub.com\u002Finstructure-react\u002Freact-tokeninput) - Tokeninput component for React.\n- [tagify](https:\u002F\u002Fgithub.com\u002FyairEO\u002Ftagify) - [demo & docs](https:\u002F\u002Fyaireo.github.io\u002Ftagify\u002F) - Lightweight, efficient Tags input component.\n\n#### Autosize Input \u002F Textarea\n\n- [react-input-autosize](https:\u002F\u002Fgithub.com\u002FJedWatson\u002Freact-input-autosize) - Auto-resizing input field for React.\n- [react-autowidth-input](https:\u002F\u002Fgithub.com\u002Fkierien\u002Freact-autowidth-input) - Highly configurable & extensible automatically sized input field built with hooks.\n- [react-textarea-autosize](https:\u002F\u002Fgithub.com\u002Fandreypopp\u002Freact-textarea-autosize) - <textarea \u002F> component for React which grows with content.\n\n#### Star Rating\n\n- [react-rating](https:\u002F\u002Fgithub.com\u002Fsmastrom\u002Freact-rating) - [demo](https:\u002F\u002Freact-rating.onrender.com\u002F) - Zero-dependency, highly customizable rating component.\n- [react-awesome-stars-rating](https:\u002F\u002Fgithub.com\u002Ffedoryakubovich\u002Freact-awesome-stars-rating) - [demo](https:\u002F\u002Freact-awesome-stars-rating.herokuapp.com\u002F) - The star rating component with accessibility.\n- [react-star-rating-input](https:\u002F\u002Fgithub.com\u002Fikr\u002Freact-star-rating-input) - React.js component for entering 0-5 (or more) stars.\n\n#### Drag and Drop\n\n- [react-beautiful-dnd](https:\u002F\u002Fgithub.com\u002Fatlassian\u002Freact-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React\n- [react-dnd](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-dnd) - Drag and Drop for React.\n- [react-drag-sizing](https:\u002F\u002Fgithub.com\u002Ffritx\u002Freact-drag-sizing) - \"Drag to resize\" (sizing) as React Component.\n- [react-draggable](https:\u002F\u002Fgithub.com\u002Fmzabriskie\u002Freact-draggable) - React draggable component.\n- [react-dragula](https:\u002F\u002Fgithub.com\u002Fbevacqua\u002Freact-dragula) - Drag and drop so simple it hurts.\n- [react-dropzone](https:\u002F\u002Fgithub.com\u002Fokonet\u002Freact-dropzone) - Simple HTML5 drag-drop zone with React.js.\n- [react-movable](https:\u002F\u002Fgithub.com\u002Ftajo\u002Freact-movable) - Accessible and minimalistic (\u003C4kB gzipped) library for vertical drag and drop in lists and tables.\n- [react-sortable-pane](https:\u002F\u002Fgithub.com\u002Fbokuweb\u002Freact-sortable-pane) - Sortable and resizable pane component for React.\n- [neodrag](https:\u002F\u002Fgithub.com\u002FPuruVJ\u002Fneodrag) - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.\n\n#### Sortable List\n\n_Let the user define an order on a list_\n\n- [react-anything-sortable](https:\u002F\u002Fgithub.com\u002Fjasonslyvia\u002Freact-anything-sortable) - Sort any children with touch support and IE8 compatibility.\n- [sortablejs](https:\u002F\u002Fgithub.com\u002FSortableJS\u002FSortable) - Lists reorderable by drag-and-drop, within and among lists.\n\n#### Rich Text Editor\n\n- [alloyeditor](https:\u002F\u002Fgithub.com\u002Fliferay\u002Falloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI.\n- [ckeditor4-react](https:\u002F\u002Fgithub.com\u002Fckeditor\u002Fckeditor4-react) - An official CKEditor 4 rich text editor wrapper.\n- [ckeditor5-react](https:\u002F\u002Fgithub.com\u002Fckeditor\u002Fckeditor5-react) - An official CKEditor 5 rich text editor wrapper.\n- [draft-js](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fdraft-js) - A React framework for building text editors.\n- [edtr-io](https:\u002F\u002Fgithub.com\u002Fedtr-io\u002Fedtr-io) - [demo](https:\u002F\u002Fedtr.io\u002F) - [docs](https:\u002F\u002Fedtr.io\u002Fdocs\u002Fgetting-started) - WYSIWYG in-line web editor with plugins.\n- [megadraft](https:\u002F\u002Fgithub.com\u002Fglobocom\u002Fmegadraft) - Rich Text editor built on top of draft.js.\n- [react-ace](https:\u002F\u002Fgithub.com\u002Fsecuringsincity\u002Freact-ace) - Ace (Advanced Code Editor) wraper.\n- [react-codemirror](https:\u002F\u002Fgithub.com\u002Fuiwjs\u002Freact-codemirror) - [demo](https:\u002F\u002Fuiwjs.github.io\u002Freact-codemirror\u002F) - CodeMirror component for React.\n- [react-contenteditable](https:\u002F\u002Fgithub.com\u002Flovasoa\u002Freact-contenteditable) - React component for a div with editable contents.\n- [react-draft-wysiwyg](https:\u002F\u002Fgithub.com\u002Fjpuri\u002Freact-draft-wysiwyg) - WYSIWYG editor build on top of [DraftJS](https:\u002F\u002Fdraftjs.org\u002F).\n- [react-editor](https:\u002F\u002Fgithub.com\u002Ffritx\u002Freact-editor) - Simple richtext editor that can insert images and HTML.\n- [react-medium-editor](https:\u002F\u002Fgithub.com\u002Fwangzuo\u002Freact-medium-editor) - medium-editor wrapper.\n- [react-monacoeditor](https:\u002F\u002Fgithub.com\u002Fjaywcjlove\u002Freact-monacoeditor) - Monaco Editor component for React.\n- [react-simple-code-editor](https:\u002F\u002Fgithub.com\u002Fsatya164\u002Freact-simple-code-editor) - Simple no-frills code editor with syntax highlighting\n- [react-quill](https:\u002F\u002Fgithub.com\u002Fzenoamaro\u002Freact-quill) - Quill wrapper.\n- [react-trumbowyg](https:\u002F\u002Fgithub.com\u002FRD17\u002Freact-trumbowyg) - [Trumbowyg](https:\u002F\u002Falex-d.github.io\u002FTrumbowyg\u002F) wrapper.\n- [remirror](https:\u002F\u002Fgithub.com\u002Fremirror\u002Fremirror) - [demo](https:\u002F\u002Fremirror.io\u002Fplayground) - [docs](https:\u002F\u002Fremirror.io\u002Fdocs) - ProseMirror toolkit for React.\n- [slate](https:\u002F\u002Fgithub.com\u002Fianstormtaylor\u002Fslate) - [demo](http:\u002F\u002Fslatejs.org\u002F) - [docs](https:\u002F\u002Fdocs.slatejs.org\u002F) - A completely customizable framework for building rich text editors.\n- [smartblock](https:\u002F\u002Fgithub.com\u002Fappleple\u002Fsmartblock) - [demo](https:\u002F\u002Fappleple.github.io\u002Fsmartblock\u002F) - [docs](https:\u002F\u002Fappleple.github.io\u002Fsmartblock\u002Fget-started) - Block based WYSIWYG editor based on ProseMirror.\n- [tiptap](https:\u002F\u002Fgithub.com\u002Fueberdosis\u002Ftiptap) - [demo](https:\u002F\u002Ftiptap.dev\u002F) - [docs](https:\u002F\u002Ftiptap.dev\u002Fintroduction) - The headless editor framework for web artisans.\n\n#### Markdown Editor\n\n- [react-simplemde-editor](https:\u002F\u002Fgithub.com\u002FRIP21\u002Freact-simplemde-editor) - React component wrapper for [EasyMDE (the most fresh SimpleMDE fork)](https:\u002F\u002Fgithub.com\u002FIonaru\u002Feasy-markdown-editor).\n- [react-markdown-editor](https:\u002F\u002Fgithub.com\u002Fjrm2k6\u002Freact-markdown-editor) - A markdown editor using React\u002FReflux.\n- [react-md-editor](https:\u002F\u002Fgithub.com\u002Fuiwjs\u002Freact-md-editor) - A simple markdown editor with preview, implemented with React.js and TypeScript.\n\n#### Image Editing\n\n_Image manipulation_\n\n- [react-avatar-editor](https:\u002F\u002Fgithub.com\u002Fmosch\u002Freact-avatar-editor) - Facebook-like, avatar \u002F profile picture component.\n- [react-avatar-generator](https:\u002F\u002Fgithub.com\u002FJosephSmith127\u002Freact-avatar-generator) - Generate fun kaleidoscope for user avatars.\n- [react-easy-crop](https:\u002F\u002Fgithub.com\u002Fricardo-ch\u002Freact-easy-crop) - Component to crop\u002Frotate images\u002Fvideos with easy interactions. Touch friendly.\n- [react-image-crop](https:\u002F\u002Fgithub.com\u002FDominicTobias\u002Freact-image-crop) - A responsive image cropping tool for React.\n- [react-image-cropper](https:\u002F\u002Fgithub.com\u002Fjerryshew\u002Freact-image-cropper) - Image cropper.\n- [react-advanced-cropper](https:\u002F\u002Fgithub.com\u002Fadvanced-cropper\u002Freact-advanced-cropper) - A react cropper library to create the cropper exactly suited for your website design.\n- [react-mobile-cropper](https:\u002F\u002Fgithub.com\u002Fadvanced-cropper\u002Freact-mobile-cropper) - A ready-to-use image cropping library highly inspirited by popular Android croppers. Based on `react-advanced-cropper`.\n\n#### Form Component Collections\n\n- [formsy-material-ui](https:\u002F\u002Fgithub.com\u002Fmbrookes\u002Fformsy-material-ui) - A Formsy compatibility wrapper for Material UI form components.\n- [formsy-react-components](https:\u002F\u002Fgithub.com\u002Ftwisty\u002Fformsy-react-components) - A set of React JS components for use in a formsy-react form.\n- [react-input-enhancements](https:\u002F\u002Fgithub.com\u002Falexkuz\u002Freact-input-enhancements) - Set of enhancements for input control.\n- [react-widgets](https:\u002F\u002Fgithub.com\u002Fjquense\u002Freact-widgets) - An à la carte set of polished, extensible, and accessible inputs.\n\n#### Miscellaneous\n\n- [@anatoliygatt\u002Fnumeric-stepper](https:\u002F\u002Fgithub.com\u002Fanatoliygatt\u002Fnumeric-stepper) - [demo](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdemo-for-anatoliygatt-numeric-stepper-mllfyl) - A fully themeable and accessible numeric stepper component.\n- [interweave](https:\u002F\u002Fgithub.com\u002Fmilesj\u002Finterweave) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.\n- [react-designer](https:\u002F\u002Fgithub.com\u002Freact-designer\u002Freact-designer) - Easy to configure, lightweight, editable vector graphics in your react components.\n- [react-upload-gallery](https:\u002F\u002Fgithub.com\u002FTPMinan\u002Freact-upload-gallery) - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.\n\n#### Syntax Highlight\n\n- [react-syntax-highlighter](https:\u002F\u002Fgithub.com\u002Fconorhastings\u002Freact-syntax-highlighter) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.\n\n## UI Layout\n\n**[`Back to top ⬆️`](#table-of-contents)**\n\n_Components to layout the app's UI_\n\n- [autoresponsive-react](https:\u002F\u002Fgithub.com\u002Fxudafeng\u002Fautoresponsive-react) - Auto responsive grid layout library.\n- [hedron](https:\u002F\u002Fgithub.com\u002FJSBros\u002Fhedron) - A no-frills flexbox grid system, powered by styled-components.\n- [m-react-splitters](https:\u002F\u002Fgithub.com\u002Fmartinnov92\u002FReact-Splitters) - Splitter component, written in TypeScript.\n- [muuri-react](https:\u002F\u002Fgithub.com\u002FPaol-imi\u002Fmuuri-react) - [demo](https:\u002F\u002F1czo5.csb.app\u002F) - [docs](https:\u002F\u002Fpaol-imi.github.io\u002Fmuuri-react) - Responsive, sortable, filterable and draggable grid layouts.\n- [react-grid-layout](https:\u002F\u002Fgithub.com\u002FSTRML\u002Freact-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React.\n- [react-layman](https:\u002F\u002Fgithub.com\u002FJeshwin\u002Freact-layman) - [demo](https:\u002F\u002Fjeshwin.github.io\u002Freact-layman\u002F) - Dynamic tiling layout manager with tabs\n- [react-masonry-component](https:\u002F\u002Fgithub.com\u002Feiriklv\u002Freact-masonry-component) - Wrapper for @desandro's Masonry.\n- [react-reflex](https:\u002F\u002Fgithub.com\u002Fleefsmp\u002FRe-Flex) - Flex layout container component for advanced React web applications.\n- [react-spaces](https:\u002F\u002Fgithub.com\u002Faeagle\u002Freact-spaces) - [demo\u002Fdocs](https:\u002F\u002Fwww.allaneagle.com\u002Freact-spaces\u002Fdemo\u002F) - Nestable anchored, resizable, scrollable components.\n- [react-stonecutter](https:\u002F\u002Fgithub.com\u002Fdantrain\u002Freact-stonecutter) - Animated grid layout component.\n- [react-colrow](https:\u002F\u002Fgithub.com\u002Fphphe\u002Freact-colrow) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.\n- [react-schematic](https:\u002F\u002Fgithub.com\u002Fumeshmk\u002Freact-schematic) - [demo](https:\u002F\u002Fumeshmk.github.io\u002Freact-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration\n\n## UI Animation\n\n**[`Back to top ⬆️`](#table-of-contents)**\n\n_Animate transitions_\n\n- [data-driven-motion](https:\u002F\u002Fgithub.com\u002Ftkh44\u002Fdata-driven-motion) - Easily animate your data.\n- [react-animatable](https:\u002F\u002Fgithub.com\u002Finokawa\u002Freact-animatable) - An animation library using Web Animations API.\n- [react-anime](https:\u002F\u002Fgithub.com\u002Fstelatech\u002Freact-anime) - A super easy animation library.\n- [react-flip-move](https:\u002F\u002Fgithub.com\u002Fjoshwcomeau\u002Freact-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.\n- [react-gsap-enhancer](https:\u002F\u002Fgithub.com\u002Fazazdeaz\u002Freact-gsap-enhancer) - Use the full power of React and GSAP together.\n- [react-tsparticles](https:\u002F\u002Fgithub.com\u002Fmatteobruni\u002Ftsparticles\u002Fblob\u002Fmaster\u002Fcomponents\u002Freact\u002FREADME.md) - A lightweight component to easily create interactive particles animations\n- [react-motion](https:\u002F\u002Fgithub.com\u002Fchenglou\u002Freact-motion) - A spring that solves your animation problems.\n- [react-mt-svg-lines](https:\u002F\u002Fgithub.com\u002Fmoarwick\u002Freact-mt-svg-lines) - Wrapper to animate the line stroke in SVGs.\n- [react-router-transition](https:\u002F\u002Fgithub.com\u002Fmaisano\u002Freact-router-transition) - Transitions built for react-router, powered by react-motion.\n- [react-spring](https:\u002F\u002Fgithub.com\u002Freact-spring\u002Freact-spring) - A spring physics based animation library.\n- [react-ts-typewriter](https:\u002F\u002Fgithub.com\u002Fgerardmarquinarubio\u002FReactTypewriter) - [demo](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Freact-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text.\n- [framer-motion](https:\u002F\u002Fgithub.com\u002Fframer\u002Fmotion) - An animation and gesture library.\n- [react-spark-scroll](https:\u002F\u002Fgithub.com\u002Fgilbox\u002Freact-spark-scroll) - Scroll-based actions and animations for react.\n- [react-track](https:\u002F\u002Fgithub.com\u002Fgilbox\u002Freact-track) - Track the position of DOM elements. Create cool animations.\n- [react-transitive-number](https:\u002F\u002Fgithub.com\u002FLapple\u002Freact-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers.\n- [react-web-animation](https:\u002F\u002Fgithub.com\u002Fbringking\u002Freact-web-animation) - React components for the Web Animations API -.\n- [auto-size-transition](https:\u002F\u002Fgithub.com\u002FDualWield\u002Fauto-size-transition) - A component that scale dynamically according to the internal children size\n- [react-particles-bg](https:\u002F\u002Fgithub.com\u002Flindelof\u002Fparticles-bg) - Particles backgrounds.\n- [gooey-react](https:\u002F\u002Fgithub.com\u002Fluukdv\u002Fgooey-react) - [demo\u002Fdocs](https:\u002F\u002Fgooey-react.netlify.app\u002F) - The gooey effect for React, used for shape blobbing \u002F metaballs.\n- [react-voodoo](https:\u002F\u002Fgithub.com\u002Freact-voodoo\u002Freact-voodoo) - [demo\u002Fsamples](https:\u002F\u002Fgithub.com\u002Freact-voodoo\u002Freact-voodoo-samples) - Additive animation engine allowing complex android\u002FiOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc\n\n### Parallax\n\n- [simple-parallax-js](https:\u002F\u002Fgithub.com\u002Fgeosigno\u002FsimpleParallax.js) - [demo](https:\u002F\u002Fsimpleparallax.com) - The easiest way to get a parallax effect with React and JavaScript on images\n- [react-parallax-tilt](https:\u002F\u002Fgithub.com\u002Fmkosir\u002Freact-parallax-tilt) - [demo](https:\u002F\u002Fmkosir.github.io\u002Freact-parallax-tilt) - Easily apply parallax tilt hover effect on components.\n\n## UI Frameworks\n\n**[`Back to top ⬆️`](#table-of-contents)**\n\n### Responsive\n\n_Set of components + responsive layout system_\n\n- [ant-design](https:\u002F\u002Fgithub.com\u002Fant-design\u002Fant-design) - [demo\u002Fdocs](https:\u002F\u002Fant.design\u002Fdocs\u002Freact\u002Fintroduce) - A UI Design Language from China. Individual [components](http:\u002F\u002Freact-component.github.io\u002F) available.\n- [atlaskit](https:\u002F\u002Fatlaskit.atlassian.com\u002Fpackages) - Atlassian's official UI library, with components from _badge_ to _tree table_.\n- [base web](https:\u002F\u002Fbaseweb.design) - Base Web is a foundation for initiating, evolving, and unifying web products.\n- [carbon](https:\u002F\u002Fgithub.com\u002Fcarbon-design-system\u002Fcarbon) - [demo\u002Fdocs](https:\u002F\u002Fwww.carbondesignsystem.com\u002F) - A design system built by IBM.\n- [cdbreact](https:\u002F\u002Fgithub.com\u002FDevwares-Team\u002Fcdbreact) - [demo](https:\u002F\u002Fwww.devwares.com\u002Fproduct\u002Fcontrast) - [docs](https:\u002F\u002Fwww.devwares.com\u002Fdocs\u002Fcontrast\u002Freact\u002Findex) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.\n- [chakra-ui](https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui) - [demo\u002Fdocs](https:\u002F\u002Fchakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications.\n- [ChatUI](https:\u002F\u002Fgithub.com\u002Falibaba\u002FChatUI) - [demo\u002Fdocs](https:\u002F\u002Fchatui.io\u002F) - The UI design language and React library for Conversational UI\n- [CoreUI for React](https:\u002F\u002Fgithub.com\u002Fcoreui\u002Fcoreui-react) - [demo\u002Fdocs](https:\u002F\u002Fcoreui.io\u002Freact) - Open Source UI components library.\n- [evergreen](https:\u002F\u002Fgithub.com\u002Fsegmentio\u002Fevergreen) - [demo\u002Fdocs](https:\u002F\u002Fevergreen.segment.com) - Evergreen React UI Framework by Segment.\n- [fluentui](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffluentui) - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.\n- [gestalt](https:\u002F\u002Fgithub.com\u002Fpinterest\u002Fgestalt) - [demo\u002Fdocs](https:\u002F\u002Fpinterest.github.io\u002Fgestalt\u002F#\u002F) - A set of components that supports Pinterest’s design language.\n- [grommet](https:\u002F\u002Fgithub.com\u002Fgrommet\u002Fgrommet) - The most advanced UX framework for enterprise applications.\n- [kokonut-ui](https:\u002F\u002Fgithub.com\u002Fkokonut-labs\u002Fkokonutui) - Free Modern and Customizable UI components.\n- [Mantine](https:\u002F\u002Fgithub.com\u002Fmantinedev\u002Fmantine) - [demo\u002Fdocs](https:\u002F\u002Fmantine.dev\u002F) - A fully featured library with 100+ hooks and components with native dark theme support\n- [orbit](https:\u002F\u002Fgithub.com\u002Fkiwicom\u002Forbit) - Components for building travel oriented projects.\n- [flowbite-react](https:\u002F\u002Fgithub.com\u002Fthemesberg\u002Fflowbite-react) - Open-source UI component library based on React, Tailwind CSS, and Flowbite.\n- [primereact](https:\u002F\u002Fgithub.com\u002Fprimefaces\u002Fprimereact) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.\n- [radix-ui](https:\u002F\u002Fwww.radix-ui.com\u002F) - Unstyled, accessible components for building high‑quality design systems and web apps.\n- [react-bootstrap](https:\u002F\u002Fgithub.com\u002Freact-bootstrap\u002Freact-bootstrap) - Bootstrap components built with React.\n- [react-foundation](https:\u002F\u002Fgithub.com\u002Fdigiaonline\u002Freact-foundation) - Foundation as React components.\n- [reakit](https:\u002F\u002Fgithub.com\u002Fariakit\u002Fariakit) - [demo\u002Fdocs](https:\u002F\u002Freakit.io\u002Fdocs\u002Fbutton\u002F) Toolkit for building accessible rich web apps\n- [searchkit](https:\u002F\u002Fgithub.com\u002Fsearchkit\u002Fsearchkit) - React UI components \u002F widgets. The easiest way to build a great search experience with Elasticsearch.\n- [semantic-ui-react](https:\u002F\u002Fgithub.com\u002FSemantic-Org\u002FSemantic-UI-React) - The official Semantic-UI-React integration.\n- [semi-design](https:\u002F\u002Fgithub.com\u002FDouyinFE\u002Fsemi-design) - [demo\u002Fdocs](https:\u002F\u002Fsemi.design\u002F) - A modern, comprehensive, flexible design system.\n- [shadcn\u002Fui](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui) - [demo](https:\u002F\u002Fui.shadcn.com\u002Fexamples\u002Fmail) - [docs](https:\u002F\u002Fui.shadcn.com\u002Fdocs) - Beautifully designed components that you can copy and paste into your apps.\n- [shineout](https:\u002F\u002Fgithub.com\u002Fsheinsight\u002Fshineout) - [demo](https:\u002F\u002Fshine.wiki\u002F1.4.x\u002Fen\u002Fcomponents\u002FGetStart) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.\n- [Tremor](https:\u002F\u002Fgithub.com\u002Ftremorlabs\u002Ftremor-raw) - [demo](https:\u002F\u002Ftremor.so\u002Fcharts) - [docs](https:\u002F\u002Ftremor.so\u002Fdocs\u002Fgetting-started\u002Finstallation) - Open-source components to build charts and dashboards.\n- [untitled-ui-react](https:\u002F\u002Fgithub.com\u002Funtitleduico\u002Freact) - [demo](https:\u002F\u002Fwww.untitledui.com\u002Freact\u002F) - Beautifully crafted collection of components built with React Aria and Tailwind CSS.\n\n#### Material Design\n\n- 🚀 [Material UI](https:\u002F\u002Fgithub.com\u002Fmui\u002Fmaterial-ui) - Full suite of components. Build your own design system, or start with Material Design.\n  - [Autocomplete](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Freact-autocomplete\u002F) - Accessible autocomplete, combobox, multiselect\n  - [Material Icons](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Fmaterial-icons\u002F) - 1,000+ SVG material icons.\n  - [Modal](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Freact-modal\u002F) - Accessible modal dialog component.\n  - [Slider](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Freact-slider\u002F) - Accessible slider component.\n  - [Table](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Freact-table\u002F) - table with sorting, selecting, pagination, virtualized.\n  - [Tree View](https:\u002F\u002Fmui.com\u002Fmaterial-ui\u002Freact-tree-view\u002F) - Accessible tree view component for React.\n- [react-essence](https:\u002F\u002Fgithub.com\u002FEvo-Forge\u002FEssence) - Essence - The Essential Material Design Framework.\n- [react-materialize](https:\u002F\u002Fgithub.com\u002Freact-materialize\u002Freact-materialize) - Material design for react, powered by materializecss.\n- [react-toolbox](https:\u002F\u002Fgithub.com\u002Freact-toolbox\u002Freact-toolbox) - A set of React components implementing Google's Material Design.\n- [mdbootstrap](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FReact-Bootstrap-with-Material-Design) - React Bootstrap with Material Design\n\n### Mobile\n\n- [antd-mobile](https:\u002F\u002Fgithub.com\u002Fant-design\u002Fant-design-mobile) - Configurable Mobile UI from China.\n- [Ionic React](https:\u002F\u002Fionicframework.com\u002Fblog\u002Fannouncing-ionic-react\u002F) - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.\n- [OnsenUI](https:\u002F\u002Fgithub.com\u002FOnsenUI\u002FOnsenUI\u002F) - [demo\u002Fdocs](https:\u002F\u002Fonsen.io\u002Fv2\u002Fguide\u002Freact\u002F) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.\n\n### Component Collections\n\n- [blueprint](https:\u002F\u002Fgithub.com\u002Fpalantir\u002Fblueprint) - [demo](https:\u002F\u002Fblueprintjs.com\u002F) - [docs](https:\u002F\u002Fblueprintjs.com\u002Fdocs\u002F) - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.\n- [dataminr-react-components](https:\u002F\u002Fgithub.com\u002Fdataminr\u002Freact-components) - Collection of reusable React Components and utility functions.\n- [shards-react](https:\u002F\u002Fgithub.com\u002FDesignRevision\u002Fshards-react) - [docs\u002Fdemo](https:\u002F\u002Fdesignrevision.com\u002Fdocs\u002Fshards-react\u002Fgetting-started) - A beautiful and modern React design system. Freemium.\n- [aframe-react](https:\u002F\u002Fgithub.com\u002Fngokevin\u002Faframe-react) - Build virtual reality experiences with A-Frame and React.\n- [react-admin](https:\u002F\u002Fgithub.com\u002Fmarmelab\u002Freact-admin) - Build admin user experiences on top of REST and GraphQL services.\n- [refine](https:\u002F\u002Fgithub.com\u002Fpankod\u002Frefine) - [demo](https:\u002F\u002Fexample.refine.dev) - [docs](https:\u002F\u002Frefine.dev\u002Fdocs) - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.\n- [matrix-card](https:\u002F\u002Fgithub.com\u002FMehmetKaplan\u002Fmatrix-card) - [demo](https:\u002F\u002Fmehmetkaplan.github.io\u002Fmatrix-card\u002F) - Simplest possible component to generate matrix rain style cards.\n- [rsuite](https:\u002F\u002Fgithub.com\u002Frsuite\u002Frsuite) - [demo\u002Fdocs](https:\u002F\u002Frsuitejs.com\u002F) - Suite of components for \"enterprise system products\".\n- [lens-ui](https:\u002F\u002Fgithub.com\u002Fluciancaetano\u002Flens-ui) - [docs](https:\u002F\u002Fgithub.com\u002Fluciancaetano\u002Flens-ui\u002Fblob\u002Fmain\u002Fdocs\u002Fintroduction.md) - A Suit of components focused on simplicity.\n- [Tailwindadmin](https:\u002F\u002Fgithub.com\u002FTailwind-Admin\u002Ffree-tailwind-admin-dashboard-template) - [docs](https:\u002F\u002Ftailwind-admin.com\u002Fcomponents) - A collection of Ready-made ShadCN UI components you can directly plug into your React\u002FNext.js projects.\n\n## UI Utilities\n\n**[`Back to top ⬆️`](#table-of-contents)**\n\n### Reporter\n\n_Report computed styles_\n\n#### Visibility Reporter\n\n_Report when a component becomes visible\u002Fhidden_\n\n- [react-intersection-observer](https:\u002F\u002Fgithub.com\u002Fthebuilder\u002Freact-intersection-observer) - React implementation of the Intersection Observer API.\n- [react-visibility-sensor](https:\u002F\u002Fgithub.com\u002Fjoshwnj\u002Freact-visibility-sensor) - Sensor component.\n- [react-waypoint](https:\u002F\u002Fgithub.com\u002Fbrigade\u002Freact-waypoint) - A React component to execute a function whenever you scroll to an element.\n\n#### Measurement Reporter\n\n_Determine and report measurements of an element_\n\n- [react-component-queries](https:\u002F\u002Fgithub.com\u002Fctrlplusb\u002Freact-component-queries) - Provide props to your Components based on their Width and\u002For Height.\n- [react-container-dimensions](https:\u002F\u002Fgithub.com\u002Fokonet\u002Freact-container-dimensions) - Wrapper component that detects element resize.\n- [react-dimensions](https:\u002F\u002Fgithub.com\u002Fdigidem\u002Freact-dimensions) - React higher-order component to get dimensions of container.\n- [react-height](https:\u002F\u002Fgithub.com\u002Fnkbt\u002Freact-height) - Component-wrapper to determine and report children elements height.\n- [react-measure](https:\u002F\u002Fgithub.com\u002Fsouporserious\u002Freact-measure) - Compute measurements of a React component.\n- [react-sizeme](https:\u002F\u002Fgithub.com\u002Fctrlplusb\u002Freact-sizeme) - Make your React Components aware of their width and height.\n\n### Device Input\n\n_Turn user input into actions_\n\n#### Keyboard Events\n\n- [react-hotkeys](https:\u002F\u002Fgithub.com\u002Fchrisui\u002Freact-hotkeys) - Declarative hotkey and focus area management for React.\n- [react-key-handler](https:\u002F\u002Fgithub.com\u002Fayrton\u002Freact-key-handler) - React component to handle keyboard events.\n- [react-keydown](https:\u002F\u002Fgithub.com\u002Fglortho\u002Freact-keydown) - Lightweight keydown wrapper for React components.\n- [react-shortcuts](https:\u002F\u002Fgithub.com\u002Favocode\u002Freact-shortcuts) - Ma","brillout\u002Fawesome-react-components 是一个精选的 React 组件和库列表。该项目旨在收集那些真正解决问题且以独特、美观或卓越方式实现的组件，同时要求这些组件有近期代码提交记录。它覆盖了从 UI 组件（如表格、无限滚动、通知等）到表单组件（如日期选择器、颜色选择器等）的广泛范围，适用于需要高质量React组件来增强用户体验或简化开发流程的各种场景。通过维护者严格的贡献指南，确保列表中的每个条目都保持高质量标准。",2,"2026-06-11 02:39:33","top_all"]