{"id":31348,"url":"https://github.com/mohamed-yamani/awesome-react-components","name":"awesome-react-components","description":"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!","projects_count":562,"last_synced_at":"2026-09-26T13:00:28.442Z","repository":{"id":154080550,"uuid":"474046014","full_name":"mohamed-yamani/awesome-react-components","owner":"mohamed-yamani","description":"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!","archived":false,"fork":false,"pushed_at":"2022-04-03T16:49:25.000Z","size":94,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-09-06T16:08:38.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohamed-yamani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"license","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-03-25T14:39:01.000Z","updated_at":"2022-12-27T14:29:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"a671b297-a37a-4d0c-8db0-bd2d7a03a0d4","html_url":"https://github.com/mohamed-yamani/awesome-react-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohamed-yamani/awesome-react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-yamani%2Fawesome-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-yamani%2Fawesome-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-yamani%2Fawesome-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-yamani%2Fawesome-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohamed-yamani","download_url":"https://codeload.github.com/mohamed-yamani/awesome-react-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamed-yamani%2Fawesome-react-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":341189360,"owners_count":37713950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-09-26T02:00:06.440Z","response_time":102,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-13T12:58:23.419Z","updated_at":"2026-09-26T13:00:28.442Z","primary_language":"JavaScript","list_of_lists":false,"displayable":true,"categories":["UI Components","Code Design","Miscellaneous","UI Animation","UI Frameworks","Utilities","Dev Tools","Uncategorized","UI Utilities","Performance","UI Layout","Cloud Solutions"],"sub_categories":["Icons","Form Logic","CSS / Style","Chart","Miscellaneous","Editable data grid / spreadsheet","Table","Form Components","Responsive","Data Store","i18n","Integrations with Third Party Services","Uncategorized","Loader","Audio / Video","Meta Tags","Infinite Scroll","Props from server","Boilerplate","Test","Static Website Generator","Framework bindings / integrations","Component Collections","Overlay","Menu","UI","Router","Device Input","Parallax","Collapse","Carousel","Notification","Server-Side Rendering","Photo / Image","Map","UI Navigation","Time / Date / Age","Tree","Tabs","Sticky","Canvas","Buttons","Custom Scrollbar","Paginator","Mobile","Reporter","Portal","Communication with server","HTML Template","Isomorphic Apps","App Size","Redux","Inspect","Databases","Test User Behavior","Markdown Viewer","Tooltip"],"readme":"# 🚀 Absolutely Awesome React Components \u0026 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\nMaintainers:\n\n- [@petebray](https://github.com/bluepeter), author of [Fluxguard](https://fluxguard.com) \u0026mdash; monitor PROD website changes.\n- [@brillout](https://twitter.com/brillout), author of [Wildcard API](https://github.com/reframejs/wildcard-api) \u0026mdash; create an RPC-like API as an alternative to REST and GraphQL.\n\n### Contributing\n\nPlease review our [contributing guidelines](https://github.com/brillout/awesome-react-components/blob/master/CONTRIBUTING.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 --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n## Table of Contents\n\n- [UI Components](#ui-components)\n  - [Editable data grid / 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  - [Carousel](#carousel)\n  - [Buttons](#buttons)\n  - [Collapse](#collapse)\n  - [Chart](#chart)\n  - [Tree](#tree)\n  - [UI Navigation](#ui-navigation)\n  - [Custom Scrollbar](#custom-scrollbar)\n  - [Audio / Video](#audio--video)\n  - [Map](#map)\n  - [Time / Date / Age](#time--date--age)\n  - [Photo / Image](#photo--image)\n  - [Icons](#icons)\n  - [Paginator](#paginator)\n  - [Markdown Viewer](#markdown-viewer)\n  - [Canvas](#canvas)\n  - [Miscellaneous](#miscellaneous)\n  - [Form Components](#form-components)\n    - [Date / 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 / 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 / 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 / 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  - [ANIMATION =\u003e https://www.framer.com/docs/introduction/](#animation--httpswwwframercomdocsintroduction)\n  - [MATERIAL UI =\u003e https://mui.com/components/grid/](#material-ui--httpsmuicomcomponentsgrid)\n  - [https://reactjs.org/docs/hooks-effect.html - https://linguinecode.com/post/understanding-react-componentdidmount - https://reactjs.org/docs/react-component.html](#httpsreactjsorgdocshooks-effecthtml---httpslinguinecodecompostunderstanding-react-componentdidmount---httpsreactjsorgdocsreact-componenthtml)\n  - [https://color.adobe.com/fr/create/image](#httpscoloradobecomfrcreateimage)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## UI Components\n\n### Editable data grid / spreadsheet\n\n- [ag-grid](https://github.com/ceolter/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.\n- [gigatables-react](https://github.com/GigaTables/reactables) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.\n- [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid.\n- [revo-grid](https://github.com/revolist/revogrid) - [demo/docs](https://revolist.github.io/revogrid/) - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.\n- [ReactGrid](https://github.com/silevis/reactgrid) - [demo/docs](https://reactgrid.com/docs/) - Add spreadsheet-like behavior to your app\n- [jqwidgets-react-grid](https://www.jqwidgets.com/react/react-grid/) - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.\n\n### Table\n\n- [Elementz Table](https://github.com/elementz-ui/elementz) - [demo/docs](https://elementz.style/#!/Table) - A modern and easy-to-use table packed with all neccessary features, responsive, infinite scrolling \u0026 more.  🆕\n- [ka-table](https://github.com/komarovalexander/ka-table) - [demo](https://komarovalexander.github.io/ka-table/#/overview) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.\n- [material-table](https://github.com/mbrn/material-table) - [demo/docs](https://material-table.com/) - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing\n- [mui-datatables](https://github.com/gregnb/mui-datatables) - Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.\n- [react-data-table](https://github.com/jbetancur/react-data-table-component) - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination\n- [react-table](https://github.com/tannerlinsley/react-table) - [demo](https://react-table.tanstack.com/docs/examples/basic) - Hooks for building fast and extendable tables and datagrids\n- [rsuite-table](https://github.com/rsuite/rsuite-table) - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized.\n- [sematable](https://github.com/sematext/sematable) - Client side sorting, pagination, and text filter for redux/react based apps.\n- [DevExtreme React Grid](https://devexpress.github.io/devextreme-reactive/react/grid/) - High-performance plugin-based data grid for Bootstrap and Material Design.\n- [Smart React Grid](https://htmlelements.com/react/demos/grid/overview/) - Fast and feature-complete data grid with Material Design.\n- [KendoReact Grid](https://www.telerik.com/kendo-react-ui/components/grid/) - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.\n\n### Infinite Scroll\n\n- [@egjs/react-infinitegrid](https://github.com/naver/egjs-infinitegrid/blob/master/packages/react-infinitegrid) - [npm](https://www.npmjs.com/package/@egjs/react-infinitegrid) - [demo](https://naver.github.io/egjs-infinitegrid/storybook/) - A module used to arrange card elements including content infinitely according to various layout types.\n- [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance.\n- [react-list](https://github.com/orgsync/react-list) - A versatile infinite scroll React component.\n- [af-virtual-scroll](https://github.com/nowaalex/af-virtual-scroll) - [demo/docs](https://af-virtual-scroll.vercel.app/docs/why) - Render large scrollable lists and tables.\n- [react-window](https://github.com/bvaughn/react-window) - [demo](https://react-window.now.sh/) - React components for efficiently rendering large lists and tabular data\n\n### Overlay\n\n_Display overlay / modal / alert / dialog / lightbox / popup_\n\n- [reboron](https://github.com/bold-commerce/reboron) - A collection of dialog animations with React.js \n- [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.\n- [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React.\n- [react-skylight](https://github.com/marcio/react-skylight) - A react component for modals and dialogs.\n- [reoverlay](https://github.com/hiradary/reoverlay) - [demo](https://hiradary.github.io/reoverlay/) - The missing solution for managing modals.\n- [sweetalert2](https://github.com/sweetalert2/sweetalert2) - [demo/docs](https://sweetalert2.github.io/) - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.\n- [sweetalert2-react-content](https://github.com/sweetalert2/sweetalert2-react-content) - Official SweetAlert2 enhancer adding support for React elements as content\n\n### Notification\n\n_Toaster / snackbar — Notify the user with a modeless temporary little popup_\n\n- [cogo-toast](https://github.com/Cogoport/cogo-toast) - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, Promise support, inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_\n- [react-notifications-component](https://github.com/teodosii/react-notifications-component) - [demo](https://teodosii.github.io/react-notifications-component/) - Highly customizable and easy-to-use component for notifications.\n- [notistack](https://iamhosseindhv.com/notistack) - [demo](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1\u0026module=%2FApp.js) - [docs](https://iamhosseindhv.com/notistack/api) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other\n- [react-toast](https://github.com/moharnadreza/react-toast) - [demo](https://codesandbox.io/s/byqvk) - [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md) - Minimal toast notifications.\n- 🚀 [react-toastify](https://github.com/fkhadra/react-toastify) - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs.\n- [react-toast-notifications](https://github.com/jossmac/react-toast-notifications) - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system.\n- [reapop](https://github.com/LouisBarranqueiro/reapop) - A React \u0026 Redux notifications system.\n- [simple-react-notifications](https://github.com/alexpermyakov/simple-react-notifications) - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip).\n- [react-hot-toast](https://github.com/timolins/react-hot-toast) - [demo](https://react-hot-toast.com/) - Smoking 🔥hot🔥 Notifications for React. Lightweight, customizable and beautiful by default.\n\n### Tooltip\n\n- [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component.\n\n### Menu\n\n_Menus / sidebars_\n\n- [hamburger-react](https://github.com/luukdv/hamburger-react) - [demo/docs](https://hamburger-react.netlify.app/) - Animated hamburger menu icons for React.\n- [react-burger-menu](https://github.com/negomi/react-burger-menu) - An off-canvas sidebar with effects and styles.\n- [react-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus for React.\n- [react-planet](https://github.com/innFactory/react-planet) - [demo](https://innfactory.github.io/react-planet/) - Create circular menus which looks like planets.\n\n### Sticky\n\n_Fixed headers / scroll-up headers / sticky elements_\n\n- [react-headroom](https://github.com/KyleAMathews/react-headroom) - Hide your header until you need it.\n- [react-sticky](https://github.com/captivationsoftware/react-sticky) - \u0026lt;Sticky /\u0026gt; component for awesome React apps.\n- [react-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky.\n\n### Tabs\n\n- [react-tabs](https://github.com/reactjs/react-tabs) - React tabs component.\n- [react-tabtab](https://github.com/ctxhou/react-tabtab) - React, tabs.\n\n### Loader\n_Loaders / spinners / progress bars — Let the user know that something is loading_\n\n- [react-loader](https://github.com/TheCognizantFoundry/react-loader) - React component that displays a spinner via spin.js until your component is loaded.\n- [react-block-ui](https://github.com/availity/react-block-ui) - Easy way to block the user from interacting with your UI.\n- [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar) - Simple Loading Bar for Redux and React.\n- [react-spinners-css](https://github.com/JoshK2/react-spinners-css) - Amazing collection of react spinners components.\n- [react-spinners](https://github.com/davidhu2000/react-spinners) - A collection of loading spinner components for react.\n- [react-content-loader](https://github.com/danilowoz/react-content-loader) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).\n\n### Carousel\n\n- [@egjs/react-flicking](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/) - [npm](https://www.npmjs.com/package/@egjs/react-flicking) - [demo](https://naver.github.io/egjs-flicking/) - It's reliable, flexible and extendable carousel.\n- [react-awesome-slider](https://github.com/rcaferati/react-awesome-slider) - [demo](https://caferati.me/demo/react-awesome-slider) - 3D animated 60fps media and content slider/carousel.\n- [pure-react-carousel](https://github.com/express-labs/pure-react-carousel) - Built from scratch and not highly opinionated.\n- [react-id-swiper](https://github.com/kidjp85/react-id-swiper) - A library to use idangerous Swiper as a ReactJs component\n- [react-instagram-zoom-slider](https://github.com/skozer/react-instagram-zoom-slider) - [demo](https://skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram.\n- [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) - React.js Responsive Carousel (with Swipe).\n- [react-slick](https://github.com/akiran/react-slick) - React carousel component.\n- [keen-slider](https://github.com/rcbyr/keen-slider) - [demo](https://keen-slider.io/examples/#examples) - Performant carousel/slider with native touch/swipe behavior.\n- [react-image-magnify](https://github.com/ethanselzer/react-image-magnify) - [demo](https://ethanselzer.github.io/react-image-magnify/#/external) - Responsive React image carousel zoom component for touch and mouse. Designed for shopping site product detail\n- [swiper](https://github.com/nolimits4web/Swiper) - [demo](https://swiperjs.com/demos) - [docs](https://swiperjs.com/react) - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.\n\n### Buttons\n- [react-awesome-button](https://github.com/rcaferati/react-awesome-button) - [demo](https://caferati.me/demo/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions.\n- [reactive-button](https://github.com/arifszn/reactive-button) - [demo](https://arifszn.github.io/reactive-button/docs/playground) - [docs](https://arifszn.github.io/reactive-button) - A beautiful animated button component with progress indicator.\n\n### Collapse\n\n- [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - Accessible Accordion component for React.\n- [react-collapse](https://github.com/nkbt/react-collapse) - Component-wrapper for collapse animation with react-motion.\n- [react-tabbordion](https://github.com/Merri/react-tabbordion) - [demo](https://merri.github.io/react-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs.\n\n### Chart\n\n_Display data in charts / graphs / diagrams_\n\n- [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts.\n- [essential js 2 charts](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts) - Beautiful and interactive charts \u0026 graphs for react.\n- [jscharting-react](https://github.com/jscharting/jscharting-react) – React chart component offering a complete set of chart types and engaging data visualizations with [JSCharting](https://jscharting.com/).\n- [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js.\n- [react-charty](https://github.com/99ff00/react-charty) - [demo](https://99ff00.github.io/react-charty/) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.\n- [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) - Common react charting components using Chart.js 2.0.\n- [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React.\n- [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS.\n- [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component.\n- [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts.\n- [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.\n- [react-sparklines](https://github.com/borisyankov/react-sparklines) - Beautiful and expressive Sparklines React component.\n- [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts.\n- [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3.\n- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3.\n- [rumble-charts](https://github.com/rumble-charts/rumble-charts) - React components for building composable and flexible charts.\n- [victory](https://github.com/FormidableLabs/victory) - Data viz for React.\n- [semiotic](https://semiotic.nteract.io/) - Semiotic is a data visualization framework for React.\n- [DevExtreme React Chart](https://devexpress.github.io/devextreme-reactive/react/chart/) - High-performance plugin-based chart for Bootstrap and Material Design.\n- [Smart React Chart](https://www.htmlelements.com/react/demos/chart/overview/) - Feature complete Charting library.\n- [react-muze](https://github.com/chartshq/react-muze) - React wrapper for [muze](https://muzejs.org/)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)\n- [Flowchart React](https://github.com/joyceworks/flowchart-react) - Flowchart \u0026 Flowchart designer for React.js.\n\n### Tree\n\n_Display a tree data structure_\n\n- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - [demo](https://rct.lukasbach.com/) - [docs](https://rct.lukasbach.com/docs/getstarted) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search\n- [react-treebeard](https://github.com/alexcurtis/react-treebeard) - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.\n- [react-treeview](https://github.com/chenglou/react-treeview) - Easy, light, flexible tree view made with React.\n\n### UI Navigation\n\n_Ways to navigate views_\n\n- [react-scroll](https://github.com/fisshy/react-scroll) - React scroll component.\n- [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) - A React Component for binded Tabs and Swipeable Views.\n\n### Custom Scrollbar\n\n- [rc-scrollbars](https://github.com/sakhnyuk/rc-scrollbars) - [demo](https://rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS\n- [react-custom-scroll](https://github.com/rommguy/react-custom-scroll) - [demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) - Easily customize the browser scroll bar with native OS scroll behavior.\n- [react-shadow-scroll](https://github.com/andrelmlins/react-shadow-scroll) - Component that customizes the image and inserts shadow when scrolling exists.\n\n### Audio / Video\n\n- [react-dailymotion](https://github.com/u-wave/react-dailymotion) - Dailymotion player component for React.\n- [react-player](https://github.com/CookPete/react-player) - A react component for playing a variety of URLs, including YouTube.\n- [react-soundplayer](https://github.com/soundblogs/react-soundplayer) - Create custom SoundCloud players with React.\n- [react-youtube](https://github.com/troybetz/react-youtube) - React.js powered YouTube player component.\n- [video-react](https://github.com/video-react/video-react) - A web video player built for the HTML5 world using React library.\n- [material-ui-audio-player](https://github.com/Werter12/material-ui-audio-player) - Audio player for material ui design.\n\n### Map\n\n- [google-map-react](https://github.com/istarkov/google-map-react) - Universal google map react component, allows render react components on the google map.\n- [pigeon-maps](https://github.com/mariusandra/pigeon-maps) - [demo](https://pigeon-maps.js.org/) - ReactJS Maps without external dependencies.\n- [react-geosuggest](https://github.com/ubilabs/react-geosuggest) - A React autosuggest for the Google Maps Places API.\n- [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps.\n- [react-map-gl](https://github.com/uber/react-map-gl) - A React wrapper for MapboxGL-js and overlay API.\n- [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl) - A React binding of mapbox-gl-js.\n- [react-svg-map](https://github.com/VictorCazanave/react-svg-map) - [demo](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map.\n\n### Time / Date / Age\n\n_Display time / date / age_\n\n- [react-timeago](https://github.com/nmn/react-timeago) - A simple time-ago component for ReactJs.\n- [timeago-react](https://github.com/hustcc/timeago-react) - Format date with `*** time ago` statement. eg: '3 hours ago'.\n- [react-google-flight-datepicker](https://github.com/JSLancerTeam/react-google-flight-datepicker) - Google flight date picker implemented in ReactJS.\n\n### Photo / Image\n\n_Display images / photos_\n\n- [lightGallery](https://github.com/sachinchoolur/lightGallery) - [demo](https://www.lightgalleryjs.com/) - [docs](https://www.lightgalleryjs.com/docs/react/) - Full-featured lightbox gallery component.\n- [react-compare-image](https://github.com/junkboy0315/react-compare-image) - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider.\n- [react-image-gallery](https://github.com/xiaolin/react-image-gallery) - Responsive image gallery, carousel, image slider react component.\n- [react-image-lightbox](https://github.com/fritz-c/react-image-lightbox) - React lightbox component.\n- [react-intense](https://github.com/brycedorn/react-intense) - A React component for viewing large images up close.\n- [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) - Responsive React Photo Gallery.\n- [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG.\n- [react-particle-image](https://github.com/malerba118/react-particle-image) - [demo](https://malerba118.github.io/react-particle-image-demo/) - Render images as interactive particles.\n- [react-imgix](https://github.com/imgix/react-imgix) - Add fast, responsive images as an image, picture, or background!\n\n### Icons\n\n_Display icons / icon set / emojis_\n\n- [iconify-react](https://github.com/iconify/iconify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.\n- [react-icons](https://github.com/gorangajic/react-icons) - Svg react icons of popular icon packs using ES6 imports.\n- [react-open-doodles](https://github.com/lunahq/react-open-doodles) - Awesome free illustrations as react components.\n- [react-icomoon](https://github.com/aykutkardas/react-icomoon) - With react-icomoon you can easily use the icons you have selected or created in icomoon.\n\n### Paginator\n\n_Display a control element to paginate_\n\n- [react-paginate](https://github.com/AdeleD/react-paginate) - A ReactJS component that creates a pagination.\n- [react-laravel-paginex](https://github.com/lionix-team/react-laravel-paginex) - Laravel Pagination with ReactJS (customizable).\n- [paginated](https://github.com/makotot/paginated) - React render props \u0026 custom hook to build pagination.\n- [react-steps](https://github.com/tkwant/react-steps) - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper.\n\n### Markdown Viewer\n\n_Display parsed markdow source_\n\n- [react-markdown](https://github.com/rexxars/react-markdown) - Render Markdown as React components.\n\n### Canvas\n\n_Sketch input using Canvas or SVG_\n\n- [react-konva](https://github.com/konvajs/react-konva) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.\n- [react-sketch](https://github.com/tbolis/react-sketch) - A Sketch tool for React based applications, backed-up by FabricJS\n- [react-sketch-canvas](https://github.com/vinothpandian/react-sketch-canvas) - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets\n- [react-heat-map](https://github.com/uiwjs/react-heat-map) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.\n\n### Miscellaneous\n\n- [react-advanced-news-ticker](https://github.com/ahmetcanaydemir/react-advanced-news-ticker) - [demo](https://www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component\n- [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Allows users to create random kaleidoscopes to be used as avatars.\n- [react-awesome-query-builder](https://github.com/ukrbublik/react-awesome-query-builder) - [demo](https://ukrbublik.github.io/react-awesome-query-builder/) - Visual query builder from form fields, with SQL, MongoDB and JSON export\n- [react-blur](https://github.com/javierbyte/react-blur) - React component for blurred backgrounds.\n- [react-demo-tab](https://github.com/mkosir/react-demo-tab) - [demo](https://mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components.\n- [react-facebook](https://github.com/CherryProjects/react-facebook) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.\n- [fastcomments-react](https://github.com/fastcomments/fastcomments-react) - [demo](\u003chttps://blog.fastcomments.com/(12-30-2019)-fastcomments-demo.html\u003e) - FastComments component for embedding a live comment thread on a page or SPA.\n- [react-pdf-viewer](https://github.com/phuoc-ng/react-pdf-viewer) - [docs](https://react-pdf-viewer.dev) - A React component to view a PDF document.\n- [react-simple-chatbot](https://github.com/LucasBassetti/react-simple-chatbot) - [demo](https://github.com/anishagg17/PIzzaBuilder) - A simple chatbot component to create conversation chats.\n- [react-file-reader-input](https://github.com/ngokevin/react-file-reader-input) - File input component for control for file reading styling and abstraction.\n- [react-filter-control](https://github.com/komarovalexander/react-filter-control) - The React filterbuilder component for building the filter criteria in the UI.\n- [react-headings](https://github.com/alexnault/react-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://github.com/gilbarbara/react-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.\n- [react-json-tree](https://github.com/alexkuz/react-json-tree) - React JSON Viewer Component, Extracted from redux-devtools.\n- [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - Resizable and movable component for React.\n- [react-resizable-box](https://github.com/bokuweb/react-resizable-box) - Resizable component for React. #reactjs.\n- [react-searchbox-awesome](https://github.com/axmz/react-searchbox-awesome) - [demo](https://axmz.github.io/react-searchbox-awesome-page/) - Minimalistic searchbox.\n- [react-split-pane](https://github.com/tomkp/react-split-pane) - React split-pane component.\n- [react-swipe-to-delete-ios](https://github.com/arnaudambro/react-swipe-to-delete-ios) - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does.\n- [react-swipeable-list](https://github.com/marekrozmus/react-swipeable-list) - [demo](https://marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items.\n- [typography](https://github.com/KyleAMathews/typography.js) - A powerful toolkit for building websites with beautiful typography.\n- [react-pulse-text](https://github.com/Kelsier90/React-Pulse-Text) - [demo/docs](https://kelsier90.github.io/React-Pulse-Text/) - Allows you to animate the text of any property of another component.\n- [captcha-image](https://github.com/tpkahlon/captcha-image) - Allows you to generate a random captcha image with options.\n- [react-pdf](https://github.com/wojtekmaj/react-pdf) - Display PDFs in your React app as easily as if they were images.\n- [react-customizable-chat-bot](https://github.com/chithakumar13/react-chat-bot) - [Demo](https://chithakumar13.github.io/bot-example) - Build your own chatbot matching your brand needs in minutes.\n- [@restpace/schema-form](https://github.com/restspace/schema-form) - [Demo](https://restspace.io/react/schema-form/demo) - Easily build complex forms automatically from a JSON Schema.\n- [react-darkreader](https://github.com/Turkyden/react-darkreader) - 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.\n- [react-apple-signin-auth](https://github.com/A-Tokyo/react-apple-signin-auth) -  Apple signin for React using the official Apple JS SDK.\n\n### Form Components\n\n_Let the user enter data_\n\n#### Date / Time picker\n\n_Date picker / time picker / datetime picker / date range picker_\n\n- [date-range-picker](https://github.com/almogtavor/date-range-picker) - [demo](https://almogtavor.github.io/date-range-picker/) - A calendar component that supports date, range \u0026 ranges picks.\n- [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Gcal/outlook like calendar component.\n- [react-date-range](https://github.com/Adphorus/react-date-range) - A React component for choosing dates and date ranges.\n- [react-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React.\n- [react-datepicker2](https://github.com/mberneti/react-datepicker2) - [demo](https://mberneti.github.io/react-datepicker2/) - [docs](https://mberneti.github.io/react-datepicker2/) A simple and reusable datepicker component (with persian jalali calendar support).\n- [react-datetime](https://github.com/YouCanBookMe/react-datetime) - A lightweight but complete datetime picker react component.\n- [react-day-picker](https://github.com/gpbl/react-day-picker) - Flexible date picker for React.\n- [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) - Flatpickr for React.\n- [react-nice-dates](https://github.com/hernansartorio/react-nice-dates) - [demo/docs](https://reactnicedates.hernansartorio.com/) A responsive, touch-friendly, and modular date picker library.\n- [react-simple-timefield](https://github.com/antonfisher/react-simple-timefield) - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field.\n- [react-timezone-select](https://github.com/ndom91/react-timezone-select) - [demo](https://ndom91.github.io/react-timezone-select/) - Dynamic, succinct timezone select. Based on `react-select`.\n- [react-yearly-calendar](https://github.com/BelkaLab/react-yearly-calendar) - React.js Yearly Calendar Component.\n- [DevExtreme React Scheduler](https://devexpress.github.io/devextreme-reactive/react/scheduler/) - High-performance plugin-based scheduler/calendar for Material Design.\n- [jQWidgets Scheduler](https://www.jqwidgets.com/react/react-scheduler/) - Feature complete Scheduling library.\n- [react-calendar](https://github.com/wojtekmaj/react-calendar) - Ultimate calendar for your React app.\n- [react-date-picker](https://github.com/wojtekmaj/react-date-picker) - A date picker for your React app.\n\n#### Emoji picker\n\n- [interweave-emoji-picker](https://github.com/milesj/interweave/tree/master/packages/emoji-picker) - A React based emoji picker powered by Interweave and Emojibase.\n\n#### Input Types\n\n_Masked inputs, specialized inputs; email / telephone number / credit card / etc._\n\n- [react-credit-cards](https://github.com/amarofashion/react-credit-cards) - Beautiful credit cards for your payment forms.\n- [react-payment-inputs](https://github.com/medipass/react-payment-inputs) - [demo](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--basic-no-styles) - A zero-dependency container to help with payment card input fields.\n- [react-input-mask](https://github.com/sanniassin/react-input-mask) - [demo](http://sanniassin.github.io/react-input-mask/demo.html) - Yet another react component for input masking.\n- [@lunasec/react-sdk](https://github.com/lunasec-io/lunasec) - [docs](https://www.lunasec.io/docs/) - Secure, hardened form components that encrypt/tokenize all data automatically.\n- [react-numpad](https://github.com/gpietro/react-numpad) - [demo](https://gpietro.github.io/react-numpad-demo/) - Extensible number pad control for numbers, dates and times.\n\n#### Autocomplete\n\n_Autosuggest / autocomplete / typeahead_\n\n- [react-autosuggest](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component.\n- [react-typeahead](https://github.com/fmoo/react-typeahead) - Pure react-based typeahead and typeahead-tokenizer.\n\n#### Select\n\n- [react-aria-menubutton](https://github.com/davidtheclark/react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button.\n- [react-functional-select](https://github.com/based-ghost/react-functional-select) - [demo](https://based-ghost.github.io/react-functional-select/) - Micro-sized \u0026 micro-optimized select component for React.js.\n- [react-select-box](https://github.com/instructure-react/react-select-box) - An accessible select box component for React.\n- [react-select](https://github.com/JedWatson/react-select) - A Select control built with and for React JS.\n- [react-column-select](https://github.com/chr-ge/react-column-select) - A column select component built for react.\n\n#### Color Picker\n\n- [coloreact](https://github.com/elrumordelaluz/coloreact) - A tiny Color Picker for React.\n- [react-color](https://github.com/uiwjs/react-color) - Is a tiny color picker widget component for React apps.\n- [react-colorful](https://github.com/omgovich/react-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.\n- [react-input-color](https://github.com/wangzuo/react-input-color) - React input color component with hsv color picker.\n\n#### Toggle\n\n- [@anatoliygatt/heart-switch](https://github.com/anatoliygatt/heart-switch) - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component.\n- [react-ios-switch](https://github.com/clari/react-ios-switch) - React switch component.\n- [react-toggle](https://github.com/instructure-react/react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox.\n- [react-triple-toggle](https://github.com/geobde/react-triple-toggle) - ⚛️ React multi toggle component.\n\n#### Slider\n\n- [react-slider](https://github.com/mpowaga/react-slider) - Slider component for React.\n\n#### Radio Button\n\n- [react-radio-group](https://github.com/chenglou/react-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://github.com/yury-dymov/react-autocomplete-input) - Autocomplete input field for React.\n- [react-mentions](https://github.com/effektif/react-mentions) - Mention people in a textarea.\n- [rich-textarea](https://github.com/inokawa/rich-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- [@pathofdev/react-tag-input](https://github.com/pathofdev/react-tag-input) - [demo \u0026 docs](https://pathof.dev/projects/react-tag-input) - Minimal tagging component with editable tags\n- [react-tag-input](https://github.com/prakhar1989/react-tags) - A fantastically simple tagging component for your React projects.\n- [react-tagsinput](https://github.com/olahol/react-tagsinput) - A simple react component for inputing tags.\n- [react-tokeninput](https://github.com/instructure-react/react-tokeninput) - Tokeninput component for React.\n\n#### Autosize Input / Textarea\n\n- [react-input-autosize](https://github.com/JedWatson/react-input-autosize) - Auto-resizing input field for React.\n- [react-autowidth-input](https://github.com/kierien/react-autowidth-input) - Highly configurable \u0026 extensible automatically sized input field built with hooks.\n- [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) - \u0026lt;textarea /\u0026gt; component for React which grows with content.\n\n#### Star Rating\n\n- [react-awesome-stars-rating](https://github.com/fedoryakubovich/react-awesome-stars-rating) - [demo](https://react-awesome-stars-rating.herokuapp.com/) - The star rating component with accessibility.\n- [react-star-rating-input](https://github.com/ikr/react-star-rating-input) - React.js component for entering 0-5 (or more) stars.\n- [react-star-rating](https://github.com/cameronroe/react-star-rating) - A simple star rating component built with React.\n\n#### Drag and Drop\n\n- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React\n- [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React.\n- [react-drag-sizing](https://github.com/fritx/react-drag-sizing) - \"Drag to resize\" (sizing) as React Component.\n- [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component.\n- [react-dragula](https://github.com/bevacqua/react-dragula) - Drag and drop so simple it hurts.\n- [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js.\n- [react-movable](https://github.com/tajo/react-movable) - Accessible and minimalistic (\u003c4kB gzipped) library for vertical drag and drop in lists and tables.\n- [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React.\n\n#### Sortable List\n\n_Let the user define an order on a list_\n\n- [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) - Sort any children with touch support and IE8 compatibility.\n- [sortablejs](https://github.com/SortableJS/Sortable) - Lists reorderable by drag-and-drop, within and among lists.\n\n#### Rich Text Editor\n\n- [alloyeditor](https://github.com/liferay/alloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI.\n- [ckeditor4-react](https://github.com/ckeditor/ckeditor4-react) - An official CKEditor 4 rich text editor wrapper.\n- [ckeditor5-react](https://github.com/ckeditor/ckeditor5-react) - An official CKEditor 5 rich text editor wrapper.\n- [draft-js](https://github.com/facebook/draft-js) - A React framework for building text editors.\n- [edtr-io](https://github.com/edtr-io/edtr-io) - [demo](https://edtr.io/) - [docs](https://edtr.io/docs/getting-started) - WYSIWYG in-line web editor with plugins.\n- [megadraft](https://github.com/globocom/megadraft) - Rich Text editor built on top of draft.js.\n- [react-ace](https://github.com/securingsincity/react-ace) - Ace (Advanced Code Editor) wraper.\n- [react-codemirror](https://github.com/uiwjs/react-codemirror) - [demo](https://uiwjs.github.io/react-codemirror/) - CodeMirror component for React. \n- [react-contenteditable](https://github.com/lovasoa/react-contenteditable) - React component for a div with editable contents.\n- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/).\n- [react-editor](https://github.com/fritx/react-editor) - Simple richtext editor that can insert images and HTML.\n- [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - medium-editor wrapper.\n- [react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor) - Monaco Editor component for React.\n- [react-quill](https://github.com/zenoamaro/react-quill) - Quill wrapper.\n- [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper.\n- [remirror](https://github.com/remirror/remirror) - [demo](https://remirror.io/playground) - [docs](https://remirror.io/docs) - ProseMirror toolkit for React.\n- [slate](https://github.com/ianstormtaylor/slate) - [demo](http://slatejs.org/) - [docs](https://docs.slatejs.org/) - A completely customizable framework for building rich text editors.\n- [smartblock](https://github.com/appleple/smartblock) - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror.\n- [tiptap](https://github.com/ueberdosis/tiptap) - [demo](https://tiptap.dev/) - [docs](https://tiptap.dev/introduction) - The headless editor framework for web artisans.\n\n#### Markdown Editor\n\n- [react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor) - React component wrapper for [EasyMDE (the most fresh SimpleMDE fork)](https://github.com/Ionaru/easy-markdown-editor).\n- [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) - A markdown editor using React/Reflux.\n- [react-md-editor](https://github.com/JedWatson/react-md-editor) - Markdown editor.\n- [react-md-editor](https://github.com/uiwjs/react-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-cropper](https://github.com/DropsOfSerenity/react-avatar-cropper) - Aiming to be a complete solution for avatar cropping in react.\n- [react-avatar-editor](https://github.com/mosch/react-avatar-editor) - Facebook-like, avatar / profile picture component.\n- [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Generate fun kaleidoscope for user avatars.\n- [react-easy-crop](https://github.com/ricardo-ch/react-easy-crop) - Component to crop/rotate images/videos with easy interactions. Touch friendly.\n- [react-image-crop](https://github.com/DominicTobias/react-image-crop) - A responsive image cropping tool for React.\n- [react-image-cropper](https://github.com/jerryshew/react-image-cropper) - Image cropper.\n- [react-advanced-cropper](https://github.com/Norserium/react-advanced-cropper) - A react cropper library to create the cropper exactly suited for your website design.\n\n#### Form Component Collections\n\n- [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A Formsy compatibility wrapper for Material-UI form components.\n- [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form.\n- [react-input-enhancements](https://github.com/alexkuz/react-input-enhancements) - Set of enhancements for input control.\n- [react-widgets](https://github.com/jquense/react-widgets) - An \u0026agrave; la carte set of polished, extensible, and accessible inputs.\n\n#### Miscellaneous\n\n- [interweave](https://github.com/milesj/interweave) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.\n- [react-designer](https://github.com/fatiherikli/react-designer) - Easy to configure, lightweight, editable vector graphics in your react components.\n- [react-upload-gallery](https://github.com/TPMinan/react-upload-gallery) - React for Upload Image Gallery. Drag \u0026 Drop, Sortable, Customize.\n\n#### Syntax Highlight\n\n- [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.\n\n## UI Layout\n\n_Components to layout the app's UI_\n\n- [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto responsive grid layout library.\n- [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen JavaScript Layout manager.\n- [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system, powered by styled-components.\n- [m-react-splitters](https://github.com/martinnov92/React-Splitters) - Splitter component, written in TypeScript.\n- [muuri-react](https://github.com/Paol-imi/muuri-react) - [demo](https://1czo5.csb.app/) - [docs](https://paol-imi.github.io/muuri-react) - Responsive, sortable, filterable and draggable grid layouts.\n- [react-grid-layout](https://github.com/STRML/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React.\n- [react-masonry-component](https://github.com/eiriklv/react-masonry-component) - Wrapper for @desandro's Masonry.\n- [react-reflex](https://github.com/leefsmp/Re-Flex) - Flex layout container component for advanced React web applications.\n- [react-spaces](https://github.com/aeagle/react-spaces) - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components.\n- [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component.\n- [react-colrow](https://github.com/phphe/react-colrow) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.\n- [react-schematic](https://github.com/umeshmk/react-schematic) - [demo](https://umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration\n\n## UI Animation\n\n_Animate transitions_\n\n- [react-tweenful](https://github.com/teodosii/react-tweenful) - [demo](https://teodosii.github.io/react-tweenful/) - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.\n- [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data.\n- [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library.\n- [react-flip-move](https://github.com/joshwcomeau/react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.\n- [react-gsap-enhancer](https://github.com/azazdeaz/react-gsap-enhancer) - Use the full power of React and GSAP together.\n- [react-tsparticles](https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md) - A lightweight component to easily create interactive particles animations\n- [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems.\n- [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) - Wrapper to animate the line stroke in SVGs.\n- [react-router-transition](https://github.com/maisano/react-router-transition) - Transitions built for react-router, powered by react-motion.\n- [react-spring](https://github.com/react-spring/react-spring) - A spring physics based animation library.\n- [framer-motion](https://github.com/framer/motion) - An animation and gesture library.\n- [react-spark-scroll](https://github.com/gilbox/react-spark-scroll) - Scroll-based actions and animations for react.\n- [react-track](https://github.com/gilbox/react-track) - Track the position of DOM elements. Create cool animations.\n- [react-transitive-number](https://github.com/Lapple/react-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers.\n- [react-web-animation](https://github.com/bringking/react-web-animation) - React components for the Web Animations API -.\n- [velocity-react](https://github.com/twitter-fabric/velocity-react) - Velocity.js wrapper.\n- [auto-size-transition](https://github.com/DualWield/auto-size-transition) - A component that scale dynamically according to the internal children size\n- [react-particles-bg](https://github.com/lindelof/particles-bg) - Particles backgrounds.\n- [gooey-react](https://github.com/luukdv/gooey-react) - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs.\n- [react-voodoo](https://github.com/react-voodoo/react-voodoo) - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc\n\n### Parallax\n\n- [react-parallax-component](https://github.com/keske/react-parallax-component) - Easiest way to add scroll parallax effect on the component.\n- [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - [demo](https://mkosir.github.io/react-parallax-tilt) - Easily apply parallax tilt hover effect on components.\n\n## UI Frameworks\n\n### Responsive\n\n_Set of components + responsive layout system_\n\n- [zeit-ui-react](https://github.com/zeit-ui/react) - Modern and minimalist React UI library.\n- 🚀 [ant-design](https://github.com/ant-design/ant-design) - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available.\n- [atlaskit](https://atlaskit.atlassian.com/packages) - Atlassian's official UI library, with components from _badge_ to _tree table_.\n- [base web](https://baseweb.design) - Base Web is a foundation for initiating, evolving, and unifying web products.\n- [carbon](https://github.com/carbon-design-system/carbon) - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM.\n- [cdbreact](https://github.com/Devwares-Team/cdbreact) - [demo](https://www.devwares.com/product/contrast) - [docs](https://www.devwares.com/docs/contrast/react/index) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.\n- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - [demo/docs](https://chakra-ui.com) - Simple, Modular \u0026 Accessible UI Components for your React Applications.\n- [CoreUI for React](https://github.com/coreui/coreui-react) - [demo/docs](https://coreui.io/react) - Open Source UI components library.\n- [evergreen](https://github.com/segmentio/evergreen) - [demo/docs](https://evergreen.segment.com) - Evergreen React UI Framework by Segment.\n- [fluent-ui](https://github.com/fluent-org/fluent-ui) - [demo/docs](https://fluent-ui.com/) - 🌈 React components that inspired by Microsoft's Fluent Design System.\n- [grommet](https://github.com/grommet/grommet) - The most advanced UX framework for enterprise applications.\n- [gestalt](https://github.com/pinterest/gestalt) - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language.\n- [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) - React components for building Microsoft web experiences.\n- [orbit-components](https://github.com/kiwicom/orbit-components/) - Components for building travel oriented projects.\n- [pivotal-ui-react](https://github.com/pivotal-cf/pivotal-ui) - React components based on a custom version of the Bootstrap library.\n- [primereact](https://github.com/primefaces/primereact) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.\n- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React.\n- [react-foundation](https://github.com/nordsoftware/react-foundation) - Foundation as React components.\n- [reakit](https://github.com/reakit/reakit) - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps\n- [rebass](https://github.com/jxnblk/rebass) - Configurable React Stateless Functional UI Components.\n- [searchkit](https://github.com/searchkit/searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.\n- [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration.\n- [shineout](https://github.com/sheinsight/shineout) - [demo](https://shine.wiki/1.4.x/en/components/GetStart) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.\n- [ChatUI](https://github.com/alibaba/ChatUI) - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI\n- [Mantine](https://github.com/mantinedev/mantine) - [demo/docs](https://mantine.dev/) - A fully featured library with 100+ hooks and components with native dark theme support\n- [semi-design](https://github.com/DouyinFE/semi-design) - [demo/docs](https://semi.design/) - A modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps \u0026 SaaS products.\n\n#### Material Design\n\n- 🚀 [Material-UI](https://github.com/mui-org/material-ui) - Full suite of components. Build your own design system, or start with Material Design.\n  - [Autocomplete](https://material-ui.com/components/tree-view/) - Accessible autocomplete, combobox, multiselect\n  - [Icons](https://material-ui.com/components/material-icons/) - 1,000+ SVG material icons.\n  - [Modal](https://material-ui.com/components/modal/) - Accessible modal dialog component.\n  - [Slider](https://material-ui.com/components/slider/) - Accessible slider component.\n  - [Table](https://material-ui.com/components/tables/) - table with sorting, selecting, pagination, virtualized.\n  - [Tree View](https://material-ui.com/components/tree-view/) - Accessible tree view component for React.\n- [react-essence](https://github.com/Evo-Forge/Essence) - Essence - The Essential Material Design Framework.\n- [react-materialize](https://github.com/react-materialize/react-materialize) - Material design for react, powered by materializecss.\n- [react-toolbox](https://github.com/react-toolbox/react-toolbox) - A set of React components implementing Google's Material Design.\n- [mdbootstrap](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) - React Bootstrap with Material Design\n\n### Mobile\n\n- [antd-mobile](https://github.com/ant-design/ant-design-mobile) - Configurable Mobile UI from China.\n- [Ionic React](https://ionicframework.com/blog/announcing-ionic-react/) - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.\n- [OnsenUI](https://github.com/OnsenUI/OnsenUI/) - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.\n\n### Component Collections\n\n- [blueprint](https://github.com/palantir/blueprint) - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.\n- [dataminr-react-components](https://github.com/dataminr/react-components) - Collection of reusable React Components and utility functions.\n- [shards-react](https://github.com/DesignRevision/shards-react) - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium 💰\n- [aframe-react](https://github.com/ngokevin/aframe-react) - Build virtual reality experiences with A-Frame and React.\n- [react-admin](https://github.com/marmelab/react-admin) - Build admin user experiences on top of REST and GraphQL services.\n- [react-desktop](https://github.com/gabrielbull/react-desktop) - React UI Components for macOS Sierra and Windows 10.\n- [refine](https://github.com/pankod/refine) - [demo](https://example.refine.dev) - [docs](https://refine.dev/docs) - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.\n- [matrix-card](https://github.com/MehmetKaplan/matrix-card) - [demo](https://mehmetkaplan.github.io/matrix-card/) - Simplest possible component to generate matrix rain style cards.\n- [rsuite](https://github.com/rsuite/rsuite) - [demo/docs](https://rsuitejs.com/) - Suite of components for \"enterprise system products\".\n\n## UI Utilities\n\n### Reporter\n\n_Report computed styles_\n\n#### Visibility Reporter\n\n_Report when a component becomes visible/hidden_\n\n- [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) - React implementation of the Intersection Observer API. \n- [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) - Sensor component.\n- [react-waypoint](https://github.com/brigade/react-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://github.com/ctrlplusb/react-component-queries) - Provide props to your Components based on their Width and/or Height.\n- [react-container-dimensions](https://github.com/okonet/react-container-dimensions) - Wrapper component that detects element resize.\n- [react-dimensions](https://github.com/digidem/react-dimensions) - React higher-order component to get dimensions of container.\n- [react-height](https://github.com/nkbt/react-height) - Component-wrapper to determine and report children elements height.\n- [react-measure](https://github.com/souporserious/react-measure) - Compute measurements of a React component.\n- [react-sizeme](https://github.com/ctrlplusb/react-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://github.com/chrisui/react-hotkeys) - Declarative hotkey and focus area management for React.\n- [react-key-handler](https://github.com/ayrton/react-key-handler) - React component to handle keyboard events.\n- [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components.\n- [react-shortcuts](https://github.com/avocode/react-shortcuts) - Manage keyboard shortcuts from one place.\n- [useKeyCapture](https://github.com/pranesh239/use-key-capture) - A custom hook to ease the key-press listeners of a target/global.\n\n#### Scroll Events\n\n- [react-scroll-components](https://github.com/jeroencoumans/react-scroll-components) - A set of components that react to page scrolling.\n\n#### Touch Swipe\n\n- [react-swipe](https://github.com/voronianski/react-swipe) - Swipe.js as a React component.\n\n#### Mouse Events\n\n- [react-aim](https://github.com/gabrielbull/react-aim) - Determine the cursor aim for triggering mouse events.\n- [react-hook-mighty-mouse](https://github.com/mkosir/react-hook-mighty-mouse) - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element.\n\n### Meta Tags\n\n_Set meta tags, \u003ctitle\u003e, children of \u003chead\u003e_\n\n- [react-document-meta](https://github.com/kodyl/react-document-meta) - HTML meta tags for React-based apps.\n- [react-document-title](https://github.com/gaearon/react-document-title) - Declarative, nested, stateful, isomorphic document.title for React.\n- [react-helmet-async](https://github.com/staylor/react-helmet-async#readme) - Thread-safe Helmet for React 16+ and friends\n- [react-helmet](https://github.com/nfl/react-helmet) - A document head manager for React.\n\n### Portal\n\n_Render an element at an arbitrary DOM node_\n\n- [react-layer-stack](https://github.com/fckt/react-layer-stack) - Simple but ubiquitously powerful and agnostic layering system for React.\n- [react-portal](https://github.com/tajo/react-portal) - React component for transportation of modals, lightboxes, loading bars... to document.body.\n\n### Test User Behavior\n\n_A/B tests, experiments, ..._\n\n- [react-ab](https://github.com/olahol/react-ab) - Simple declarative and universal A/B testing component for React.\n- [react-experiments](https://github.com/HubSpot/react-experiments) - React components for implementing UI experiments.\n\n## Code Design\n\n_Libraries that help with code design_\n\n### Data Store\n\n_Data flow / data management / data stores / components state / data flow_\n\n- [alt](https://github.com/goatslacker/alt) - Isomorphic flux implementation.\n- [baobab-react](https://github.com/Yomguithereal/baobab-react) - React integration for Baobab.\n- [cerebral](https://github.com/cerebral/cerebral) - A state controller with its own debugger.\n- [effector-react](https://github.com/effector/effector) - React bindings for effector, an effective multi-store state manager.\n- [fluorine-lib](https://github.com/philpl/fluorine) - Reactive state and side effect management for React using a single stream of actions.\n- [fluxible](https://github.com/yahoo/fluxible) - A pluggable container for universal flux applications.\n- [fluxxor](https://github.com/BinaryMuse/fluxxor) - Flux architecture tools for React.\n- [kea](https://github.com/mariusandra/kea) - High level architecture for React apps.\n- [mobx-react](https://github.com/mobxjs/mobx-react) - React bindings for MobX. Create fully reactive components.\n- [react-3ducks](https://github.com/smakazmi/react-3ducks) - [demo](https://stackblitz.com/github/smakazmi/react-3ducks/tree/master/examples/todos) - Simple state management solution for React.\n- [react-controllables](https://github.com/matthewwithanm/react-controllables) - Easily create controllable components.\n- [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application.\n- [react-redux-provide](https://github.com/loggur/react-redux-provide) - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.\n- [react-redux](https://github.com/reactjs/react-redux) - Official React bindings for Redux.\n- [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) - Reducer + action to reduce actions under a single subscriber notification.\n- [redux-batched-subscribe](https://github.com/tappleby/redux-batched-subscribe) - Store enhancer for which allows batching subscribe notifications.\n- [redux](https://github.com/reactjs/redux) - Predictable state container for JavaScript apps.\n- [reflux](https://github.com/reflux/refluxjs) - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.\n- [reselect](https://github.com/reactjs/reselect) - Selector library for Redux.\n- [resourcerer](https://github.com/SiftScience/resourcerer) - Declarative data-fetching framework for REST APIs\n- [shasta](https://github.com/shastajs/shasta) - Dead simple + opinionated toolkit for building redux/react applications.\n- [zustand](https://zustand.surge.sh/) - [docs](https://github.com/pmndrs/zustand) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.\n- [teaful](https://github.com/teafuljs/teaful) - Tiny, easy and powerful React state management\n\n### Form Logic\n\n- [data-driven-forms](https://github.com/data-driven-forms/react-forms) - A declarative way for building forms with all the functionality.\n- [formcat](https://github.com/guilouro/formcat) - A simple and easy way to control forms in React using the React Context API\n- [formik](https://github.com/jaredpalmer/formik) - Build forms without tears and supports Validation in ease.\n- [formsy-react](https://github.com/formsy/formsy-react/) - A form input builder and validator for React JS.\n- [plexus-form](https://github.com/AppliedMathematicsANU/plexus-form) - A dynamic form component for react using JSON-Schema.\n- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React hooks for form validation without the hassle.\n- [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSONSchema.\n- [react-validation-mixin](https://github.com/jurassix/react-validation-mixin) - Simple validation mixin (HoC) for React.\n- [react-final-form](https://github.com/final-form/react-final-form) - Subscription-based form state management\n- [react-formawesome](https://github.com/MAKARD/react-formawesome) - Complex library for creating awesome forms.\n- [surveyjs](https://github.com/surveyjs/survey-library) - The advanced Survey and Form library\n- [Formily](https://github.com/alibaba/formily) - High performance, extensible, and Typescript friendly\n\n### Router\n\n- [react-breadcrumbs](https://github.com/svenanders/react-breadcrumbs) - Automatic breadcrumbs for React-Router.\n- [react-router-component](https://github.com/STRML/react-router-component) - Declarative router component for React.\n- [react-router-scroll](https://github.com/taion/react-router-scroll) - React Router scroll management.\n- [react-router](https://github.com/reactjs/react-router) - A complete routing library for React.\n- [redux-first-history](https://github.com/salvoravida/redux-first-history) - Redux First History - Redux history binding support react-router - @reach/router - wouter\n- [redux-router](https://github.com/acdlite/redux-router) - Redux bindings for React Router \u0026ndash; keep your router state inside your Redux store.\n- [universal-router](https://github.com/kriasoft/universal-router) - A simple middleware-style router for isomorphic JavaScript web apps.\n- [wouter](https://github.com/molefrog/wouter) - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.\n\n### Props from server\n\n_Component properties asynchronously fetched over the network_\n\n- [react-async](https://github.com/andreypopp/react-async) - Asynchronously fetch data for React components.\n- [react-refetch](https://github.com/heroku/react-refetch) - A simple, declarative, and composable way to fetch data for React components.\n- [react-resolver](https://github.com/ericclemmons/react-resolver) - Async rendering \u0026amp; data-fetching for universal React applications.\n- [react-router-relay](https://github.com/relay-tools/react-router-relay) - Relay integration for React Router.\n- [redial](https://github.com/markdalgleish/redial) - Universal data fetching and route lifecycle management for React etc.\n- [redux-async-connect](https://github.com/Rezonans/redux-async-connect) - Request async data, store in redux state, and connect to your component.\n- [redux-connect](https://github.com/makeomatic/redux-connect) - Provides decorator for resolving async props in react-router.\n- [axios-react](https://github.com/soroushchehresa/axios-react) - HTTP client component for React.\n\n### Communication with server\n\n- [adrenaline](https://github.com/gyzerok/adrenaline) - Simple Relay alternative.\n- [apollo-client](https://github.com/apollostack/apollo-client) - A simple caching client for any GraphQL server and UI framework.\n- [react-relay](https://github.com/facebook/relay) - Relay is a JavaScript framework for building data-driven React applications.\n\n### CSS / Style\n\n- [aesthetic](https://github.com/milesj/aesthetic) - A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.\n- [aphrodite](https://github.com/Khan/aphrodite) - It\u0026#39;s inline styles, but they work!.\n- [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects.\n- [paperclip](https://paperclip.dev) - [docs](https://paperclip.dev/docs/) - Build UI primitivites with plain HTML \u0026 CSS.\n- [radium](https://github.com/FormidableLabs/radium) - A set of tools to manage inline styles on React elements.\n- [react-container-query](https://github.com/d6u/react-container-query) - Modular responsive component.\n- [react-css-modules](https://github.com/gajus/react-css-modules) - Seamless mapping of class names to CSS modules inside of React components.\n- [react-responsive](https://github.com/contra/react-responsive) - Media queries in react for responsive design.\n- [reactponsive](https://github.com/jmlweb/reactponsive) - Responsive components and hooks.\n- [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age.\n\n### HTML Template\n\n- [hyperx](https://github.com/substack/hyperx) - Tagged template string virtual dom builder.\n- [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements) - Neater If and For for React JSX.\n\n### Isomorphic Apps\n\n- [hypernova](https://github.com/airbnb/hypernova) - A service for server-side rendering your JavaScript views.\n- [isomorphic-relay](https://github.com/denvned/isomorphic-relay) - Adds server side rendering support to React Relay.\n- [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader) - Isomorphic CSS style loader for Webpack.\n- [react-server](https://github.com/redfin/react-server) - React framework with server render for blazing fast page load.\n- [rill](https://github.com/rill-js/rill) - Universal web application framework.\n- [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) - Server-side rendering for your Webpack-built applications (e.g. React).\n\n### Boilerplate\n\n_Scaffold / starter kit / Yeoman generator / stack ensemble / seed_\n\n- [create-react-app](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration.\n- [crisp-react](https://github.com/winwiz1/crisp-react) - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.\n- [cra-template-redux-auth-starter](https://github.com/Nilanth/cra-template-redux-auth-starter) - A Redux auth starter boilerplate for CRA.\n- [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Live editing development on desktop app.\n- [essential-react](https://github.com/pheuter/essential-react) - A minimal skeleton for building testable React apps using Babel.\n- [generator-react-webpack](https://github.com/react-webpack-generators/generator-react-webpack) - Yeoman generator for ReactJS and Webpack.\n- [generator-starhackit](https://github.com/FredericHeem/starhackit) - Full-stack starter kit.\n- [nwb](https://github.com/insin/nwb) - CLI tool and devDependency for React apps \u0026amp; components and npm modules.\n- [nx](https://nx.dev) - Next generation build system with first class monorepo support and powerful integrations.\n- [react-boilerplate](https://github.com/mxstbr/react-boilerplate) - Quick packager-agnostic boilerplate for React modules using JSX.\n- [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) - Minimal live-editing boilerplate for your next ReactJS project.\n- [react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp.\n- [reactuate](https://github.com/reactuate/reactuate) - React/Redux stack (not a boilerplate kit).\n- [redux-cli](https://github.com/SpencerCDixon/redux-cli) - An opinionated CLI for building redux/react apps quicker.\n- [relay-fullstack](https://github.com/lvarayut/relay-fullstack) - Relay Starter Kit.\n- [roc](https://github.com/rocjs/roc) - Modern Application Development Ecosystem.\n- [rockpack](https://github.com/AlexSergey/rockpack) - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.\n- [universal-redux](https://github.com/bdefore/universal-redux) - An npm package that lets you jump right into coding React and Redux.\n- [create-react-dependency](https://github.com/andrelmlins/create-react-dependency) - Create react dependencies with no build configuration.\n- [phoenix](https://github.com/Sazito/phoenix) - A simple boilerplate that helps you make your react application with Server Side Rendering \u0026 Localization support.\n- [react-enterprise-starter-kit](https://github.com/anandgupta193/react-enterprise-starter-kit) - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.\n- [express-react-boilerplate](https://github.com/htdangkhoa/erb) - A tool that helps programmers create Express \u0026 React projects easily base on react-cool-starter.\n\n### Miscellaneous\n\n- [react-inlinesvg](https://github.com/matthewwithanm/react-inlinesvg) - An SVG loader component for ReactJS.\n- [react-godfather](https://github.com/kapolos/react-godfather) - A new way to write Functional Components, without Hooks.\n- [redux-auth-patch](https://github.com/lynndylanhurley/redux-auth) - Complete token authentication system for react + redux that supports isomorphic rendering.\n- [redux-search](https://github.com/treasure-data/redux-search) - Redux bindings for client-side search.\n- [tcomb-react](https://github.com/gcanti/tcomb-react) - Alternative syntax for PropTypes.\n- [react-find](https://github.com/geobde/react-find) - ⚛️ Elegant, accessible search component for React.\n- [react-universal-hooks](https://github.com/salvoravida/react-universal-hooks) - :tada: support react hooks everywhere (Functional or Class Component).\n\n## Utilities\n\n- [qrcode.react](https://github.com/zpao/qrcode.react) - A \u0026lt;QRCode/\u0026gt; component for use with React.\n- [react-children-utilities](https://github.com/fernandopasik/react-children-utilities) - Extended utils for React.Children.\n- [react-media](https://github.com/ReactTraining/react-media) - A CSS media query component for React.\n- [react-middle-ellipsis](https://github.com/bluepeter/react-middle-ellipsis) - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end.\n- [react-translate-component](https://github.com/martinandert/react-translate-component) - Multi-lingual/localized text content.\n\n### i18n\n\n_Internationalization / L10n / localization / translation_\n\n- [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem.\n- [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps.\n- [react-localized](https://github.com/fakundo/react-localized) - Internationalization for React components based on `gettext` format.\n- [react-translate-maker](https://github.com/CherryProjects/react-translate-maker) - Universal internationalization (i18n) open source library for React.\n- [react-intl-universal](https://github.com/alibaba/react-intl-universal) - [demo](https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html) Internationalize React apps. Not only for React.Component but also for Vanilla JS.\n- [@tolgee/react](https://github.com/tolgee/tolgee-js/tree/main/packages/react) - [docs](https://tolgee.io/docs/web/using_with_react/installation) – Web-based localization tool enabling users to translate directly in the React app they develop   \n- [js-lingui](https://github.com/lingui/js-lingui) - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript.\n\n### Framework bindings / integrations\n\n- [backbone-react-component](https://github.com/magalhas/backbone-react-component) - A bit of nifty glue that automatically plugs your Backbone models.\n- [elm-react-component](https://github.com/KtorZ/elm-react-component) - A React component which wraps an Elm module to be used in a React application.\n- [gl-react](https://github.com/ProjectSeptemberInc/gl-react) - OpenGL / WebGL bindings for React to implement complex effects over images and content.\n- [react-backbone](https://github.com/jhudson8/react-backbone) - Backbone-aware mixins for react and a whole lot more.\n- [react-d3-library](https://github.com/react-d3-library/react-d3-library) - Open source library for using D3 in React.\n- [react-elm-components](https://github.com/evancz/react-elm-components) - Write React components in Elm.\n- [react-famous](https://github.com/pilwon/react-famous) - React bridge to Famo.us.\n- [react-localstorage](https://github.com/STRML/react-localstorage) - Simple componentized localstorage implementation for Facebook\u0026#39;s React.\n- [react-lottie-player](https://github.com/mifi/react-lottie-player) - [demo](https://mifi.github.io/react-lottie-player/) - Declarative lottie animation player.\n- [react-on-rails](https://github.com/shakacode/react_on_rails) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.\n- [react-three-renderer](https://github.com/toxicFork/react-three-renderer) - Render into a three.js canvas using React.\n- [react-threejs](https://github.com/fritx/react-threejs) - Simplest bindings between React \u0026 Three.js\n- [reactfire](https://github.com/firebase/reactfire) - ReactJS mixin for easy Firebase integration.\n- [reactive-elements](https://github.com/PixelsCommander/ReactiveElements) - Allows to use React.js component as HTML element (web component).\n- [react-unity-webgl](https://github.com/elraccoone/react-unity-webgl) - Unity intergration with two-way communication using a built-in Event System.\n\n### Integrations with Third Party Services\n\n- [react-ga](https://github.com/react-ga/react-ga) - React Google Analytics Module.\n- [react-google-analytics](https://github.com/hzdg/react-google-analytics) - Google analytics component.\n- [react-google-autocomplete](https://github.com/ErrorPro/react-google-autocomplete) - Google Places API components and hooks.\n- [react-recaptcha](https://github.com/appleboy/react-recaptcha) - A react.js reCAPTCHA for Google.\n- [react-stripe-checkout](https://github.com/azmenak/react-stripe-checkout) - Load stripe\u0026#39;s checkout.js as a react component. Easiest way to use checkout with React.\n- [redux-segment](https://github.com/rangle/redux-segment) - Segment.io analytics integration for redux.\n- [react-slack-notification](https://github.com/Nilanth/react-slack-notification) - Send messages and error logs to a Slack channel directly.\n\n## Performance\n\n### UI\n\n- [inferno](https://github.com/trueadm/inferno) - An extremely fast, React-like JavaScript library for building modern user interfaces.\n- [react-fastclick](https://github.com/JakeSidSmith/react-fastclick) - Fast Touch Events for React.\n- [react-static-container](https://github.com/reactjs/react-static-container) - Renders static content efficiently.\n\n#### Inspect\n\n- [react-perf-tool](https://github.com/RamonGebben/react-perf-tool) - Debug performance of your React application.\n- [react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer) - Render visualizer for ReactJS.\n\n#### Lazy Load\n\n- [react-infinite-grid](https://github.com/ggordan/react-infinite-grid) - A React component which renders a grid of elements.\n- [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView.\n- [react-lazy-load](https://github.com/loktar00/react-lazy-load) - React component that renders children elements when they enter the viewport.\n- [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance.\n- [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data.\n\n### App Size\n\n- [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) - Remove unnecessary React propTypes.\n- [react-lite](https://github.com/Lucifier129/react-lite) - An implementation of React that optimizes for small script size.\n\n### Server-Side Rendering\n\n- [iSSR](https://github.com/AlexSergey/issr) - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.\n- [react-esi](https://github.com/dunglas/react-esi) - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments\n\n## Dev Tools\n\n### Test\n\n- [carte-blanche](https://github.com/carteb/carte-blanche) - An isolated development space with integrated fuzz testing for your components.\n- [chai-enzyme](https://github.com/producthunt/chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme.\n- [enzyme](https://github.com/airbnb/enzyme) - JavaScript Testing utilities for React.\n- [jest-cli](https://github.com/facebook/jest) - Painless JavaScript Testing.\n- [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS.\n- [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction.\n- [rut](https://github.com/milesj/rut) - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers.\n- [unexpected-react](https://github.com/bruderstein/unexpected-react) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.\n\n### Redux\n\n- [redux-devtools-chart-monitor](https://github.com/romseguy/redux-devtools-chart-monitor) - A chart monitor for Redux DevTools.\n- [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) - A resizable and movable dock for Redux DevTools monitors.\n- [redux-devtools-filterable-log-monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor) - Filterable tree view monitor for Redux DevTools.\n- [redux-devtools-inspector](https://github.com/alexkuz/redux-devtools-inspector) - Another Redux DevTools Monitor.\n- [redux-devtools-log-monitor](https://github.com/gaearon/redux-devtools-log-monitor) - The default monitor for Redux DevTools with a tree view.\n- [redux-devtools](https://github.com/gaearon/redux-devtools) - DevTools for Redux with hot reloading, action replay, and customizable UI.\n- [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) - Redux DevTools remotely.\n\n### Inspect\n\n- [fluxguard](https://fluxguard.com) - PROD change monitoring that highlights all DOM + design changes.\n- [react-inspector](https://github.com/xyc/react-inspector) - Power of Browser DevTools inspectors right inside your React app.\n- [react-json-inspector](https://github.com/Lapple/react-json-inspector) - React JSON inspector component.\n- [reactotron](https://github.com/reactotron/reactotron) - A CLI and OS X app for inspecting your React JS and React Native apps.\n\n### Miscellaneous\n\n- [component-controls](https://github.com/ccontrols/component-controls) - [demo](https://component-controls.com) - [docs](https://component-controls.com/tutorial) - A next-generation tool to create blazing-fast documentation sites.\n- [cosmos-js](https://github.com/skidding/cosmos) - DX tool for designing truly encapsulated React components.\n- [react-demo-tab-cli](https://github.com/mkosir/react-demo-tab-cli) - CLI tool for creating demos of react components.\n- [react-heatpack](https://github.com/insin/react-heatpack) - A \u0026#39;heatpack\u0026#39; command for quick React development with webpack hot reloading.\n- [react-styleguidist](https://github.com/sapegin/react-styleguidist) - React style guide generator.\n- [standard-react](https://github.com/feross/standard) - JavaScript Standard Style Guide.\n- [Plasmic](https://www.plasmic.app/) - Powerful design tool for building your React components visually.\n- [SimpleLocalize](https://github.com/simplelocalize/simplelocalize-cli) - Open source CLI tool for finding i18n keys in React projects.\n\n## Miscellaneous\n\n- [DataFormsJS JSX Loader](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.\n- [html-to-react-components](https://github.com/roman01la/html-to-react-components) - Extract annotated portions of HTML into React components as separate modules.\n- [htmltojsx](https://github.com/reactjs/react-magic) - Automatically AJAXify plain HTML with the power of React. It\u0026#39;s magic!.\n- [jsonx](https://github.com/repetere/jsonx) - React JSON Syntax.\n- [mozaik](https://github.com/plouc/mozaik) - Moza\u0026iuml;k is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.\n- [react-blessed](https://github.com/Yomguithereal/react-blessed) - A react renderer for blessed.\n- [jsondiffpatch-react](https://github.com/bluepeter/jsondiffpatch-react) - JSON diffing.\n\n### Static Website Generator\n\n- [gatsby](https://github.com/gatsbyjs/gatsby) - Transform plain text into dynamic blogs and websites using React.js.\n\n## Cloud Solutions\n\n### Databases\n\n- [crisp-bigquery](https://github.com/winwiz1/crisp-bigquery) - Full stack Google BigQuery with Express in TypeScript.\n- [react-server-routing-example](https://github.com/mhart/react-server-routing-example) - Universal client/server routing and data with AWS DynamoDB.\n  \n\n### ANIMATION =\u003e https://www.framer.com/docs/introduction/\n\n### MATERIAL UI =\u003e https://mui.com/components/grid/\n   \n### https://reactjs.org/docs/hooks-effect.html - https://linguinecode.com/post/understanding-react-componentdidmount - https://reactjs.org/docs/react-component.html\n  \n### https://color.adobe.com/fr/create/image\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/mohamed-yamani%2Fawesome-react-components/projects"}