Skip to content

Correia-jpv/fucking-awesome-react-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 Absolutely Awesome React Components & Libraries

This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well:

  • It solves a real problem
  • It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
  • It has recent code commits!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

See also:      0⭐      0🍴 Awesome React Frameworks).

Maintainers:

  • @petebray, author of 🌎 Fluxguard — monitor PROD website changes.
  • 🌎 @brillout, author of 🌎 Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

Contributing

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.

Table of Contents

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

  •   2203⭐    202🍴 fortune-sheet) - An online spreedsheet component that provides out-of-the-box features just like Excel.
  •  11886⭐   1799🍴 AG Grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  •    142⭐     32🍴 gigatables-react) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  •   3829⭐   1136🍴 MUI X Data grid) - 🌎 demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
  •   6729⭐   2162🍴 react-data-grid) - Excel-like grid.
  •   2662⭐    168🍴 revo-grid) - 🌎 demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  •   1081⭐    119🍴 ReactGrid) - 🌎 demo/docs - Add spreadsheet-like behavior to your app
  • 🌎 jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

Table

  •    703⭐     53🍴 ka-table) - 🌎 demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.

  •    839⭐     60🍴 mantine-datatable) - 🌎 demo/docs - Lightweight table component for Mantine UI applications, with lots of features

  •   3488⭐   1031🍴 material-table) - 🌎 demo/docs - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing

  •   2680⭐    931🍴 mui-datatables) - Built on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.

  •   2000⭐    397🍴 react-data-table) - 🌎 demo/docs - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination

  •  24265⭐   3011🍴 TanStack Table) - 🌎 demo - Headless UI for building powerful tables & datagrids

  •    714⭐     41🍴 react-table-library) - 🌎 demo - React Table Library -- an almost headless table library -- for building better tables.

  •    704⭐    134🍴 rsuite-table) - demo/docs - A table component that supports virtualized.

  •    161⭐     25🍴 sematable) - Client side sorting, pagination, and text filter for redux/react based apps.

  • 🌎 DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.

  • 🌎 Smart React Grid - Fast and feature-complete data grid with Material Design.

  • 🌎 KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

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

  • 🌎 AG Grid - The Best JavaScript Grid in the World

Infinite Scroll

  •   1899⭐     91🍴 @egjs/react-infinitegrid) - 🌎 npm - 🌎 demo - A module used to arrange card elements including content infinitely according to various layout types.
  •   5827⭐    486🍴 react-lazyload) - Lazyload your Component, Image or anything else where the performance matters.
  •   1954⭐    175🍴 react-list) - A versatile infinite scroll React component.
  •     75⭐      5🍴 @af-utils/virtual) - 🌎 demo/docs - Render large scrollable lists and grids.
  •  15353⭐    770🍴 react-window) - 🌎 demo - React components for efficiently rendering large lists and tabular data
  •    980⭐     33🍴 virtua) - 🌎 demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  •   1031⭐     96🍴 react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  •   7328⭐    807🍴 react-modal) - Accessible modal dialog component for React.
  •    146⭐      8🍴 reoverlay) - 🌎 demo - The missing solution for managing modals.
  •  16871⭐   1586🍴 sweetalert2) - 🌎 demo/docs - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
  •    682⭐     46🍴 sweetalert2-react-content) - Official SweetAlert2 enhancer adding support for React elements as content

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

  •   1255⭐     73🍴 react-notifications-component) - 🌎 demo - Highly customizable and easy-to-use component for notifications.
  • 🌎 notistack - 🌎 demo - 🌎 docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
  •    127⭐      2🍴 react-local-toast) - 🌎 demo - 🌎 docs - show feedback linked to particular component instead of app-wide toasts.
  •     72⭐      4🍴 react-toast) - 🌎 demo -     72⭐      4🍴 docs) - Minimal toast notifications.
  • 🚀  12246⭐    672🍴 react-toastify) - 🌎 demo - best bet out there at the moment. Hooks support. No refs.
  •   1542⭐     78🍴 reapop) - A React & Redux notifications system.
  •     60⭐      6🍴 simple-react-notifications) - 🌎 demo - Tiny notification library (1kb gzip).
  •   9211⭐    303🍴 react-hot-toast) - 🌎 demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
  • 🌎 Sonner - An opinionated toast component for React.

Tooltip

  •   3466⭐    522🍴 react-tooltip) - React tooltip component.

Menu

Menus / sidebars

  •    923⭐     33🍴 hamburger-react) - 🌎 demo/docs - Animated hamburger menu icons for React.
  •   5010⭐    585🍴 react-burger-menu) - An off-canvas sidebar with effects and styles.
  •     49⭐     19🍴 react-offcanvas) - Off-canvas menus for React.
  •    171⭐     17🍴 react-planet) - 🌎 demo - Create circular menus which looks like planets.
  •    114⭐      5🍴 mantine-contextmenu) - 🌎 demo/docs - Context-menu hook/component for applications built with Mantine UI.

Sticky

Fixed headers / scroll-up headers / sticky elements

  •   1818⭐    147🍴 react-headroom) - Hide your header until you need it.
  •   1249⭐    144🍴 react-stickynode) - A performant and comprehensive React sticky.

Tabs

  •   3052⭐    444🍴 react-tabs) - React tabs component.
  •    397⭐     54🍴 react-tabtab) - React, tabs.

Loader

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

  •    942⭐    142🍴 react-loader-spinner) - Collection set of react-spinner for async operation.
  •    937⭐     94🍴 react-redux-loading-bar) - Simple Loading Bar for Redux and React.
  •    322⭐     20🍴 react-spinners-css) - Amazing collection of react spinners components.
  •   2962⭐    256🍴 react-spinners) - A collection of loading spinner components for react.
  •  13410⭐    412🍴 react-content-loader) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Carousel

  •   2671⭐    127🍴 @egjs/react-flicking) - 🌎 npm - 🌎 demo - It's reliable, flexible and extendable carousel.
  •   2887⭐    286🍴 react-awesome-slider) - 🌎 demo - Fullpage, 3D animated, 60fps media and content slider/carousel.
  •   1663⭐    163🍴 pure-react-carousel) - Built from scratch and not highly opinionated.
  •   1485⭐    152🍴 react-id-swiper) - A library to use idangerous Swiper as a ReactJs component
  •     77⭐     26🍴 react-instagram-zoom-slider) - 🌎 demo - A slider component with pinch to zoom capabilities inspired by Instagram.
  •   2631⭐    627🍴 react-responsive-carousel) - React.js Responsive Carousel (with Swipe).
  •  11581⭐   2094🍴 react-slick) - React carousel component.
  •   4522⭐    204🍴 keen-slider) - 🌎 demo - Performant carousel/slider with native touch/swipe behavior.
  •  38759⭐   9740🍴 swiper) - 🌎 demo - 🌎 docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Buttons

  •   1275⭐    131🍴 react-awesome-button) - 🌎 demo - 3D animated 60fps buttons with load progress and social share actions.
  •    124⭐     20🍴 reactive-button) - 🌎 demo - 🌎 docs - A beautiful animated button component with progress indicator.

Collapse

  •    784⭐    113🍴 react-accessible-accordion) - Accessible Accordion component for React.
  •   1120⭐    122🍴 react-collapse) - Component-wrapper for collapse animation with react-motion.
  •     80⭐     10🍴 react-tabbordion) - 🌎 demo - Universal, semantic and CSS-only components for creating Accordions and Tabs.

Chart

Display data in charts / graphs / diagrams

  •    691⭐     33🍴 chartify) - React.js plugin for building animated draggable and customizable charts.
  •    325⭐     98🍴 essential js 2 charts) - Beautiful and interactive charts & graphs for react.
  •   4399⭐    619🍴 echarts for react) - Wrapper around beautiful Apache Echarts
  •     17⭐      3🍴 jscharting-react) – React chart component offering a complete set of chart types and engaging data visualizations with 🌎 JSCharting.
  •    528⭐    101🍴 react-chartist) - React component for Chartist.js.
  •     71⭐      6🍴 react-charty) - 🌎 demo - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
  •   6427⭐   2302🍴 react-chartjs-2) - Common react charting components using Chart.js 2.0.
  •   1629⭐    207🍴 react-d3-components) - D3 Components for React.
  •   1440⭐    144🍴 react-dazzle) - Dashboards made easy in React JS.
  •   1561⭐    337🍴 react-google-charts) - React-google-charts React component.
  •   1254⭐    235🍴 react-highcharts) - React-highcharts.
  •    258⭐     44🍴 react-sigmajs) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
  •   2829⭐    192🍴 react-sparklines) - Beautiful and expressive Sparklines React component.
  •    852⭐    283🍴 react-timeseries-charts) - Declarative timeseries charts.
  •   8673⭐    828🍴 react-vis) - Data visualization library based on React and d3.
  •  22859⭐   1663🍴 recharts) - Redefined chart library built with React and D3.
  •    346⭐     39🍴 rumble-charts) - React components for building composable and flexible charts.
  •  10803⭐    521🍴 victory) - Data viz for React.
  • 🌎 semiotic - Semiotic is a data visualization framework for React.
  • 🌎 DevExtreme React Chart - High-performance plugin-based chart for Bootstrap and Material Design.
  • 🌎 Smart React Chart - Feature complete Charting library.
  •     16⭐      2🍴 react-muze) - React wrapper for 🌎 muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
  •     40⭐      8🍴 Flowchart React) - Flowchart & Flowchart designer for React.js.
  •   1563⭐    363🍴 react-dashboard) - Isomorphic Dashboards.

Command palette

  • 🌎 cmdk - Fast, composable, unstyled command menu for React.
  •   4658⭐    179🍴 kbar) - 🌎 demo - Fast, portable, and extensible cmd+k interface.

Tree

Display a tree data structure

  •   2806⭐    120🍴 react-arborist) - 🌎 demo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
  •    777⭐     65🍴 react-complex-tree) - 🌎 demo - 🌎 docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
  •   1087⭐    165🍴 react-treeview) - Easy, light, flexible tree view made with React.
  •     11⭐      2🍴 he-tree-react) - 🌎 demo - 🌎 docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.

UI Navigation

Ways to navigate views

  •   4288⭐    433🍴 react-scroll) - React scroll component.
  •   4443⭐    469🍴 react-swipeable-views) - A React Component for binded Tabs and Swipeable Views.

Custom Scrollbar

  •    142⭐     14🍴 rc-scrollbars) - 🌎 demo - Customizable scrollbars with flex options and 60FPS
  •    544⭐     65🍴 react-custom-scroll) - demo - Easily customize the browser scroll bar with native OS scroll behavior.
  •     28⭐      4🍴 react-shadow-scroll) - Component that customizes the image and inserts shadow when scrolling exists.

Audio / Video

  •     17⭐      6🍴 react-dailymotion) - Dailymotion player component for React.
  •   8909⭐   1119🍴 react-player) - A react component for playing a variety of URLs, including YouTube.
  •   1461⭐    110🍴 react-soundplayer) - Create custom SoundCloud players with React.
  •   1830⭐    223🍴 react-youtube) - React.js powered YouTube player component.
  •   2623⭐    389🍴 video-react) - A web video player built for the HTML5 world using React library.
  •     72⭐     23🍴 material-ui-audio-player) - Audio player for material ui design.
  •      8⭐      2🍴 react-vision-camera) - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
  •     18⭐      2🍴 react-barcode-qrcode-scanner) - Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.

Map

  •   6311⭐    837🍴 google-map-react) - Universal google map react component, allows render react components on the google map.
  •   3423⭐    143🍴 pigeon-maps) - 🌎 demo - ReactJS Maps without external dependencies.
  •   1031⭐    327🍴 react-geosuggest) - A React autosuggest for the Google Maps Places API.
  •   4971⭐    881🍴 react-leaflet) - React components for Leaflet maps.
  •   7616⭐   1334🍴 react-map-gl) - A React wrapper for MapboxGL-js and overlay API.
  •    224⭐     47🍴 react-svg-map) - 🌎 demo - A set of components to display an interactive SVG map.

Time / Date / Age

Display time / date / age

  •   1037⭐    121🍴 react-timeago) - A simple time-ago component for ReactJs.
  •    416⭐     21🍴 timeago-react) - Format date with *** time ago statement. eg: '3 hours ago'.
  •    383⭐     46🍴 react-google-flight-datepicker) - Google flight date picker implemented in ReactJS.

Photo / Image

Display images / photos

  •   6259⭐   1272🍴 lightGallery) - 🌎 demo - 🌎 docs - Full-featured lightbox gallery component.
  •    312⭐     77🍴 react-compare-image) - 🌎 demo - React component to compare two images using a slider.
  •   3713⭐    706🍴 react-image-gallery) - Responsive image gallery, carousel, image slider react component.
  •    705⭐     34🍴 yet-another-react-lightbox) - 🌎 demo - 🌎 docs - React lightbox component.
  •    182⭐     10🍴 react-intense) - A React component for viewing large images up close.
  •    458⭐     32🍴 react-photo-album) - 🌎 demo - 🌎 docs - Responsive React Photo Gallery.
  •    675⭐    126🍴 react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG.
  •    453⭐     18🍴 react-particle-image) - 🌎 demo - Render images as interactive particles.
  •    353⭐     64🍴 react-imgix) - Add fast, responsive images as an image, picture, or background!
  •     19⭐      2🍴 @frameright/react-image-display-control) - Define zoom regions for smart responsive images.
  •    278⭐      8🍴 zoom-image) - 🌎 demo - 🌎 docs - A little yet powerful framework agnostic library to zoom image on the web

Icons

Display icons / icon set / emojis

  •    203⭐     12🍴 iconify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  •  11154⭐    722🍴 react-icons) - Svg react icons of popular icon packs using ES6 imports.
  •     65⭐      1🍴 react-open-doodles) - Awesome free illustrations as react components.
  •    216⭐     22🍴 react-icomoon) - With react-icomoon you can easily use the icons you have selected or created in icomoon.
  • 🌎 tabler-icons-react - A set of over 450 free MIT-licensed high-quality SVG icons.
  •   9008⭐    380🍴 Lucide) - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

Paginator

Display a control element to paginate

  •   2723⭐    623🍴 react-paginate) - A ReactJS component that creates a pagination.
  •     27⭐      9🍴 react-laravel-paginex) - Laravel Pagination with ReactJS (customizable).
  •     21⭐      1🍴 paginated) - React render props & custom hook to build pagination.
  •     15⭐      3🍴 react-steps) - 🌎 Demo - Responsive React Stepper.

Markdown Viewer

Display parsed markdow source

  •  12354⭐    847🍴 react-markdown) - Render Markdown as React components.

Canvas

Sketch input using Canvas or SVG

  •   5549⭐    250🍴 react-konva) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
  •    668⭐    226🍴 react-sketch) - A Sketch tool for React based applications, backed-up by FabricJS
  •    379⭐     69🍴 react-sketch-canvas) - 🌎 Demo Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets
  •    171⭐     24🍴 react-heat-map) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.

Miscellaneous

  •   4606⭐    223🍴 puck) - 🌎 demo - The self-hosted visual editor for React
  •     30⭐      0🍴 procaptcha) - 🌎 demo - 🌎 docs - Privacy focused free CAPTCHA
  •     49⭐      5🍴 react-advanced-news-ticker) - 🌎 demo - A flexible and animated vertical news ticker component
  •     65⭐      6🍴 react-avatar-generator) - Allows users to create random kaleidoscopes to be used as avatars.
  •   1838⭐    482🍴 react-awesome-query-builder) - 🌎 demo - Visual query builder from form fields, with SQL, MongoDB and JSON export
  •    452⭐     48🍴 react-blur) - React component for blurred backgrounds.
  •     41⭐      6🍴 react-demo-tab) - 🌎 demo - A React component to easily create demos of other components.
  •    780⭐    141🍴 react-facebook) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
  •      7⭐      3🍴 fastcomments-react) - demo - FastComments component for embedding a live comment thread on a page or SPA.
  •   2053⭐    207🍴 react-pdf-viewer) - 🌎 docs - A React component to view a PDF document.
  •   1706⭐    594🍴 react-simple-chatbot) -      2⭐      0🍴 demo) - A simple chatbot component to create conversation chats.
  •    117⭐     30🍴 react-file-reader-input) - File input component for control for file reading styling and abstraction.
  •     47⭐     11🍴 react-filter-control) - The React filterbuilder component for building the filter criteria in the UI.
  •     72⭐      2🍴 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.
  •   6542⭐    509🍴 react-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
  •     40⭐      2🍴 react-mouse-select) - 🌎 Demo A component that allows selecting DOM elements by moving the mouse
  •   3766⭐    316🍴 react-resizable-and-movable) - Resizable and movable component for React.
  •   2337⭐    209🍴 react-resizable-box) - Resizable component for React. #reactjs.
  •     30⭐      3🍴 react-searchbox-awesome) - 🌎 demo - Minimalistic searchbox.
  •   3152⭐    406🍴 react-split-pane) - React split-pane component.
  •     44⭐     16🍴 react-swipe-to-delete-ios) - 🌎 demo - To delete an item in a list the same way iOS does.
  •    100⭐     20🍴 react-swipeable-list) - 🌎 demo - Configurable component to render list with swipeable items.
  •   3815⭐    181🍴 typography) - A powerful toolkit for building websites with beautiful typography.
  •     17⭐      0🍴 react-pulse-text) - 🌎 demo/docs - Allows you to animate the text of any property of another component.
  •      8⭐      1🍴 captcha-image) - Allows you to generate a random captcha image with options.
  •   8656⭐    839🍴 react-pdf) - Display PDFs in your React app as easily as if they were images.
  •     17⭐      5🍴 react-customizable-chat-bot) - 🌎 Demo - Build your own chatbot matching your brand needs in minutes.
  •     45⭐      6🍴 @restpace/schema-form) - 🌎 Demo - Easily build complex forms automatically from a JSON Schema.
  •    276⭐     20🍴 react-darkreader) - A React Hook for adding a dark / night mode to your site inspired by darkreader.
  •    100⭐     13🍴 react-apple-signin-auth) - Apple signin for React using the official Apple JS SDK.
  •      3⭐      0🍴 react-mrz-scanner) - A React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer.

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Emoji picker

  •   1058⭐     38🍴 interweave-emoji-picker) - A React based emoji picker powered by Interweave and Emojibase.

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

  •   2555⭐    297🍴 react-credit-cards) - Beautiful credit cards for your payment forms.
  •    336⭐     59🍴 react-payment-inputs) - 🌎 demo - A zero-dependency container to help with payment card input fields.
  •   2199⭐    254🍴 react-input-mask) - demo - Yet another react component for input masking.
  •   1412⭐    162🍴 @lunasec/react-sdk) - 🌎 docs - Secure, hardened form components that encrypt/tokenize all data automatically.
  •    136⭐     38🍴 react-numpad) - 🌎 demo - Extensible number pad control for numbers, dates and times.
  •    281⭐     71🍴 react-multi-email) - 🌎 demo - Format multiple emails as the user types.

Autocomplete

Autosuggest / autocomplete / typeahead

  •   5963⭐    586🍴 react-autosuggest) - WAI-ARIA compliant React autosuggest component.
  •    677⭐    232🍴 react-typeahead) - Pure react-based typeahead and typeahead-tokenizer.

Select

  •    456⭐     85🍴 react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button.
  •    193⭐     11🍴 react-functional-select) - 🌎 demo - Micro-sized & micro-optimized select component for React.js.
  •    274⭐    111🍴 react-mobile-picker) - 🌎 demo - An iOS like select box component.
  •  27307⭐   4089🍴 react-select) - A Select control built with and for React JS.
  •     13⭐      2🍴 react-column-select) - A column select component built for react.
  •    671⭐    150🍴 react-select-search) - 🌎 demo - A lightweight select component for React

Color Picker

  •     88⭐     10🍴 coloreact) - A tiny Color Picker for React.
  •    229⭐     77🍴 react-color) - Is a tiny color picker widget component for React apps.
  •   3021⭐     96🍴 react-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
  •    242⭐     34🍴 react-input-color) - React input color component with hsv color picker.

Toggle

  •    439⭐     16🍴 @anatoliygatt/heart-switch) - 🌎 demo - A fully themeable and accessible heart-shaped toggle switch component.
  •    128⭐     26🍴 react-ios-switch) - React switch component.
  •    943⭐    158🍴 react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox.
  •      4⭐      0🍴 ui-switch) - The most complete Toggle component

Slider

  •    881⭐    231🍴 react-slider) - Slider component for React.

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

  •    191⭐     66🍴 react-autocomplete-input) - Autocomplete input field for React.
  •   2362⭐    556🍴 react-mentions) - Mention people in a textarea.
  •    276⭐      8🍴 rich-textarea) - A textarea to colorize, highlight, decorate texts and offer autocomplete.

Tag Input

Let the user add multiple tags in a single input

  •   1463⭐    386🍴 react-tag-input) - A fantastically simple tagging component for your React projects.
  •   1344⭐    233🍴 react-tagsinput) - A simple react component for inputing tags.
  •    147⭐     48🍴 react-tokeninput) - Tokeninput component for React.
  •   3374⭐    427🍴 tagify) - 🌎 demo & docs - Lightweight, efficient Tags input component.

Autosize Input / Textarea

  •    755⭐    173🍴 react-input-autosize) - Auto-resizing input field for React.
  •     11⭐      1🍴 react-autowidth-input) - Highly configurable & extensible automatically sized input field built with hooks.
  •   2151⭐    241🍴 react-textarea-autosize) - <textarea /> component for React which grows with content.

Star Rating

Drag and Drop

  •  32553⭐   2500🍴 react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React
  •  20594⭐   1973🍴 react-dnd) - Drag and Drop for React.
  •     19⭐      3🍴 react-drag-sizing) - "Drag to resize" (sizing) as React Component.
  •   8832⭐   1018🍴 react-draggable) - React draggable component.
  •    990⭐     80🍴 react-dragula) - Drag and drop so simple it hurts.
  •  10346⭐    781🍴 react-dropzone) - Simple HTML5 drag-drop zone with React.js.
  •   1397⭐     49🍴 react-movable) - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
  •    646⭐     51🍴 react-sortable-pane) - Sortable and resizable pane component for React.
  •   1495⭐     50🍴 neodrag) - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.

Sortable List

Let the user define an order on a list

  •    459⭐     84🍴 react-anything-sortable) - Sort any children with touch support and IE8 compatibility.
  •  28874⭐   3672🍴 sortablejs) - Lists reorderable by drag-and-drop, within and among lists.

Rich Text Editor

  •   1375⭐    282🍴 alloyeditor) - WYSIWYG editor based on CKEditor with completely rewritten UI.
  •     93⭐     50🍴 ckeditor4-react) - An official CKEditor 4 rich text editor wrapper.
  •    412⭐     99🍴 ckeditor5-react) - An official CKEditor 5 rich text editor wrapper.
  •  22555⭐   2645🍴 draft-js) - A React framework for building text editors.
  •    707⭐     34🍴 edtr-io) - 🌎 demo - 🌎 docs - WYSIWYG in-line web editor with plugins.
  •   1209⭐    214🍴 megadraft) - Rich Text editor built on top of draft.js.
  •   3970⭐    604🍴 react-ace) - Ace (Advanced Code Editor) wraper.
  •   1452⭐    122🍴 react-codemirror) - 🌎 demo - CodeMirror component for React.
  •   1593⭐    217🍴 react-contenteditable) - React component for a div with editable contents.
  •   6361⭐   1149🍴 react-draft-wysiwyg) - WYSIWYG editor build on top of 🌎 DraftJS.
  •     55⭐      6🍴 react-editor) - Simple richtext editor that can insert images and HTML.
  •    502⭐     92🍴 react-medium-editor) - medium-editor wrapper.
  •    282⭐     23🍴 react-monacoeditor) - Monaco Editor component for React.
  •   1512⭐    167🍴 react-simple-code-editor) - Simple no-frills code editor with syntax highlighting
  •   6528⭐    896🍴 react-quill) - Quill wrapper.
  •    144⭐     21🍴 react-trumbowyg) - 🌎 Trumbowyg wrapper.
  •   2635⭐    228🍴 remirror) - 🌎 demo - 🌎 docs - ProseMirror toolkit for React.
  •  29101⭐   3189🍴 slate) - demo - 🌎 docs - A completely customizable framework for building rich text editors.
  •    307⭐     28🍴 smartblock) - 🌎 demo - 🌎 docs - Block based WYSIWYG editor based on ProseMirror.
  •  24157⭐   2031🍴 tiptap) - 🌎 demo - 🌎 docs - The headless editor framework for web artisans.

Markdown Editor

Image Editing

Image manipulation

  •   2305⭐    368🍴 react-avatar-editor) - Facebook-like, avatar / profile picture component.
  •     65⭐      6🍴 react-avatar-generator) - Generate fun kaleidoscope for user avatars.
  •     53⭐      4🍴 react-easy-crop) - Component to crop/rotate images/videos with easy interactions. Touch friendly.
  •   3752⭐    338🍴 react-image-crop) - A responsive image cropping tool for React.
  •    175⭐     56🍴 react-image-cropper) - Image cropper.
  •    594⭐     26🍴 react-advanced-cropper) - A react cropper library to create the cropper exactly suited for your website design.
  •     18⭐      4🍴 react-mobile-cropper) - A ready-to-use image cropping library highly inspirited by popular Android croppers. Based on react-advanced-cropper.

Form Component Collections

  •    571⭐    150🍴 formsy-material-ui) - A Formsy compatibility wrapper for Material UI form components.
  •    288⭐     96🍴 formsy-react-components) - A set of React JS components for use in a formsy-react form.
  •   1376⭐     68🍴 react-input-enhancements) - Set of enhancements for input control.
  •   2330⭐    397🍴 react-widgets) - An à la carte set of polished, extensible, and accessible inputs.

Miscellaneous

  •    162⭐      7🍴 @anatoliygatt/numeric-stepper) - 🌎 demo - A fully themeable and accessible numeric stepper component.
  •   1058⭐     38🍴 interweave) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  •   1862⭐    229🍴 react-designer) - Easy to configure, lightweight, editable vector graphics in your react components.
  •     76⭐     44🍴 react-upload-gallery) - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

  •   3889⭐    272🍴 react-syntax-highlighter) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.

UI Layout

Back to top ⬆️

Components to layout the app's UI

  •   1563⭐    120🍴 autoresponsive-react) - Auto responsive grid layout library.
  •   6177⭐    529🍴 golden-layout) - A multi-screen JavaScript Layout manager.
  •    865⭐     60🍴 hedron) - A no-frills flexbox grid system, powered by styled-components.
  •    160⭐     21🍴 m-react-splitters) - Splitter component, written in TypeScript.
  •    346⭐     48🍴 muuri-react) - 🌎 demo - 🌎 docs - Responsive, sortable, filterable and draggable grid layouts.
  •  19606⭐   2531🍴 react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React.
  •   1423⭐    145🍴 react-masonry-component) - Wrapper for @desandro's Masonry.
  •    617⭐     73🍴 react-reflex) - Flex layout container component for advanced React web applications.
  •   1227⭐     23🍴 react-spaces) - 🌎 demo/docs - Nestable anchored, resizable, scrollable components.
  •   1208⭐     84🍴 react-stonecutter) - Animated grid layout component.
  •      6⭐      1🍴 react-colrow) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
  •      5⭐      1🍴 react-schematic) - 🌎 demo - Build responsive layouts using styled schematics without an overhead of any theme configuration

UI Animation

Back to top ⬆️

Animate transitions

  •    541⭐     32🍴 data-driven-motion) - Easily animate your data.
  •     37⭐      1🍴 react-animatable) - An animation library using Web Animations API.
  •   1531⭐     82🍴 react-anime) - A super easy animation library.
  •   4040⭐    257🍴 react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
  •    722⭐     38🍴 react-gsap-enhancer) - Use the full power of React and GSAP together.
  •   7146⭐    797🍴 react-tsparticles) - A lightweight component to easily create interactive particles animations
  •  21657⭐   1153🍴 react-motion) - A spring that solves your animation problems.
  •    361⭐     23🍴 react-mt-svg-lines) - Wrapper to animate the line stroke in SVGs.
  •   2593⭐    139🍴 react-router-transition) - Transitions built for react-router, powered by react-motion.
  •  27543⭐   1169🍴 react-spring) - A spring physics based animation library.
  •     35⭐      2🍴 react-ts-typewriter) - 🌎 demo - Easy to use and customizable typewriter effect for any text.
  •  22327⭐    736🍴 framer-motion) - An animation and gesture library.
  •    357⭐     48🍴 react-spark-scroll) - Scroll-based actions and animations for react.
  •    339⭐     23🍴 react-track) - Track the position of DOM elements. Create cool animations.
  •    210⭐     21🍴 react-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers.
  •    298⭐     25🍴 react-web-animation) - React components for the Web Animations API -.
  •      9⭐      1🍴 auto-size-transition) - A component that scale dynamically according to the internal children size
  •    632⭐     92🍴 react-particles-bg) - Particles backgrounds.
  •    644⭐     15🍴 gooey-react) - 🌎 demo/docs - The gooey effect for React, used for shape blobbing / metaballs.
  •     14⭐      1🍴 react-voodoo) -      3⭐      0🍴 demo/samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc

Parallax

UI Frameworks

Back to top ⬆️

Responsive

Set of components + responsive layout system

  • 🌎 AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
  •  90496⭐  46572🍴 ant-design) - 🌎 demo/docs - A UI Design Language from China. Individual components available.
  • 🌎 atlaskit - Atlassian's official UI library, with components from badge to tree table.
  • 🌎 base web - Base Web is a foundation for initiating, evolving, and unifying web products.
  •   7509⭐   1745🍴 carbon) - 🌎 demo/docs - A design system built by IBM.
  •     50⭐     14🍴 cdbreact) - 🌎 demo - 🌎 docs - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
  •  36762⭐   3161🍴 chakra-ui) - 🌎 demo/docs - Simple, Modular & Accessible UI Components for your React Applications.
  •   2467⭐    267🍴 ChatUI) - 🌎 demo/docs - The UI design language and React library for Conversational UI
  •    649⭐    254🍴 CoreUI for React) - 🌎 demo/docs - Open Source UI components library.
  •  12342⭐    830🍴 evergreen) - 🌎 demo/docs - Evergreen React UI Framework by Segment.
  •  17773⭐   2651🍴 fluentui) - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
  •   4235⭐    330🍴 geist-ui) - Modern and minimalist React UI library.
  •   4213⭐    337🍴 gestalt) - 🌎 demo/docs - A set of components that supports Pinterest’s design language.
  •   8303⭐   1017🍴 grommet) - The most advanced UX framework for enterprise applications.
  •  24764⭐   1761🍴 Mantine) - 🌎 demo/docs - A fully featured library with 100+ hooks and components with native dark theme support
  •   1369⭐    150🍴 orbit) - Components for building travel oriented projects.
  •   1731⭐    383🍴 flowbite-react) - Open-source UI component library based on React, Tailwind CSS, and Flowbite.
  •   5918⭐    935🍴 primereact) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
  • 🌎 radix-ui - Unstyled, accessible components for building high‑quality design systems and web apps.
  •  22228⭐   3581🍴 react-bootstrap) - Bootstrap components built with React.
  •    601⭐     68🍴 react-foundation) - Foundation as React components.
  •   7654⭐    366🍴 reakit) - 🌎 demo/docs Toolkit for building accessible rich web apps
  •   4723⭐    442🍴 searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  •  13187⭐   4044🍴 semantic-ui-react) - The official Semantic-UI-React integration.
  •   7967⭐    678🍴 semi-design) - 🌎 demo/docs - A modern, comprehensive, flexible design system.
  •    911⭐    147🍴 shineout) - 🌎 demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

  • 🚀  91905⭐  31603🍴 Material UI) - Full suite of components. Build your own design system, or start with Material Design.
    • 🌎 Autocomplete - Accessible autocomplete, combobox, multiselect
    • 🌎 Material Icons - 1,000+ SVG material icons.
    • 🌎 Modal - Accessible modal dialog component.
    • 🌎 Slider - Accessible slider component.
    • 🌎 Table - table with sorting, selecting, pagination, virtualized.
    • 🌎 Tree View - Accessible tree view component for React.
  •    417⭐     51🍴 react-essence) - Essence - The Essential Material Design Framework.
  •   1386⭐    307🍴 react-materialize) - Material design for react, powered by materializecss.
  •   8670⭐    975🍴 react-toolbox) - A set of React components implementing Google's Material Design.
  •   1407⭐    264🍴 mdbootstrap) - React Bootstrap with Material Design

Mobile

  •  11447⭐   2359🍴 antd-mobile) - Configurable Mobile UI from China.
  • 🌎 Ionic React - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
  •      ?⭐      ?🍴 OnsenUI) - 🌎 demo/docs - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Component Collections

  •  20459⭐   2144🍴 blueprint) - 🌎 demo - 🌎 docs - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  •      ?⭐      ?🍴 dataminr-react-components) - Collection of reusable React Components and utility functions.
  •    755⭐     95🍴 shards-react) - 🌎 docs/demo - A beautiful and modern React design system. Freemium.
  •   1415⭐    155🍴 aframe-react) - Build virtual reality experiences with A-Frame and React.
  •  24187⭐   5167🍴 react-admin) - Build admin user experiences on top of REST and GraphQL services.
  •  25295⭐   1888🍴 refine) - 🌎 demo - 🌎 docs - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
  •     24⭐      1🍴 matrix-card) - 🌎 demo - Simplest possible component to generate matrix rain style cards.
  •   8180⭐    921🍴 rsuite) - 🌎 demo/docs - Suite of components for "enterprise system products".
  •      7⭐      0🍴 lens-ui) -      7⭐      0🍴 docs) - A Suit of components focused on simplicity.

UI Utilities

Back to top ⬆️

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

  •    183⭐     12🍴 react-component-queries) - Provide props to your Components based on their Width and/or Height.
  •    231⭐     27🍴 react-container-dimensions) - Wrapper component that detects element resize.
  •    454⭐     76🍴 react-dimensions) - React higher-order component to get dimensions of container.
  •    180⭐     27🍴 react-height) - Component-wrapper to determine and report children elements height.
  •   1938⭐    109🍴 react-measure) - Compute measurements of a React component.
  •   1932⭐     90🍴 react-sizeme) - Make your React Components aware of their width and height.

Device Input

Turn user input into actions

Keyboard Events

  •   2140⭐    163🍴 react-hotkeys) - Declarative hotkey and focus area management for React.
  •    388⭐     29🍴 react-key-handler) - React component to handle keyboard events.
  •    502⭐     40🍴 react-keydown) - Lightweight keydown wrapper for React components.
  •    327⭐     37🍴 react-shortcuts) - Manage keyboard shortcuts from one place.
  •     24⭐      2🍴 useKeyCapture) - A custom hook to ease the key-press listeners of a target/global.
  •     26⭐      0🍴 react-keyboard-navigator) - A suite of React components and hook for selecting sibling components through the keyboard.

Scroll Events

Touch Swipe

  •   1661⭐    256🍴 react-swipe) - Swipe.js as a React component.

Mouse Events

Meta Tags

Set meta tags, <title>, children of

  •   1999⭐    151🍴 react-helmet-async) - Thread-safe Helmet for React 16+ and friends
  •  17252⭐    657🍴 react-helmet) - A document head manager for React.

Portal

Render an element at an arbitrary DOM node

  •    160⭐     10🍴 react-layer-stack) - Simple but ubiquitously powerful and agnostic layering system for React.
  •   2139⭐    185🍴 react-portal) - React component for transportation of modals, lightboxes, loading bars... to document.body.

Test User Behavior

A/B tests, experiments, ...

  •    319⭐     20🍴 react-experiments) - React components for implementing UI experiments.

Code Design

Back to top ⬆️

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

  •    311⭐     38🍴 baobab-react) - React integration for Baobab.
  •   1987⭐    124🍴 cerebral) - A state controller with its own debugger.
  •   4515⭐    220🍴 effector-react) - React bindings for effector, an effective multi-store state manager.
  •    196⭐     12🍴 fireproof) - 🌎 demo - 🌎 docs Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend
  • 🌎 RxDB -  20798⭐   1012🍴 demo) - 🌎 docs A fast, local first, reactive Database for JavaScript Applications
  •   1810⭐    226🍴 fluxible) - A pluggable container for universal flux applications.
  •   1923⭐     51🍴 kea) - High level architecture for React apps.
  •    383⭐     56🍴 react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application.
  •  23260⭐   3361🍴 react-redux) - Official React bindings for Redux.
  •   1045⭐     37🍴 redux-batched-actions) - Reducer + action to reduce actions under a single subscriber notification.
  •  60526⭐  15275🍴 redux) - Predictable state container for JavaScript apps.
  •  19008⭐    669🍴 reselect) - Selector library for Redux.
  •     80⭐      4🍴 resourcerer) - Declarative data-fetching framework for REST APIs
  •      9⭐      0🍴 synergies) - 🌎 docs A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.
  • 🌎 zustand -  43343⭐   1325🍴 docs) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
  •    706⭐     24🍴 teaful) - Tiny, easy and powerful React state management

Form Logic

  •    289⭐     83🍴 data-driven-forms) - A declarative way for building forms with all the functionality.
  •  33598⭐   2773🍴 formik) - Build forms without tears and supports Validation in ease.
  •      ?⭐      ?🍴 formsy-react) - A form input builder and validator for React JS.
  •      3⭐      0🍴 Phormal) - 🌎 Docs & Demos - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.
  •  39912⭐   1993🍴 react-hook-form) - React hooks for form validation without the hassle.
  •  13742⭐   2155🍴 react-jsonschema-form) - A React component for building Web forms from JSONSchema.
  •      4⭐      1🍴 react-client-validation) - Simple and super lightweight validation for React.
  •   7343⭐    480🍴 react-final-form) - Subscription-based form state management
  •      6⭐      2🍴 react-formawesome) - Complex library for creating awesome forms.
  •   3968⭐    775🍴 surveyjs) - The advanced Survey and Form library
  •  10834⭐   1415🍴 Formily) - High performance, extensible, and Typescript friendly
  •      2⭐      0🍴 hook-form-react) - 🌎 docs - A lightweight, dependency-free solution React hooks for form validation.

Router

  •    874⭐     94🍴 react-router-component) - Declarative router component for React.
  •    841⭐     61🍴 react-router-scroll) - React Router scroll management.
  •  52124⭐  10150🍴 react-router) - A complete routing library for React.
  •    439⭐     34🍴 redux-first-history) - Redux First History - Redux history binding support react-router - @reach/router - wouter
  •   1702⭐    106🍴 universal-router) - A simple middleware-style router for isomorphic JavaScript web apps.
  •   6222⭐    143🍴 wouter) - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.
  •   7224⭐    492🍴 tanstack-router) - Type-safe router with built-in caching & URL state management

Props from server

Component properties asynchronously fetched over the network

  •   3433⭐    142🍴 react-refetch) - A simple, declarative, and composable way to fetch data for React components.
  •    550⭐     68🍴 redux-connect) - Provides decorator for resolving async props in react-router.
  •     45⭐      4🍴 axios-react) - HTTP client component for React.

Communication with server

  •  19239⭐   2634🍴 apollo-client) - A simple caching client for any GraphQL server and UI framework.
  •  18208⭐   1797🍴 react-relay) - Relay is a JavaScript framework for building data-driven React applications.
  •  40183⭐   2700🍴 query) - 🌎 docs Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

CSS / Style

  •    203⭐      5🍴 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.
  •   5339⭐    188🍴 aphrodite) - It's inline styles, but they work!.
  •    392⭐     70🍴 inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects.
  •    886⭐     46🍴 react-container-query) - Modular responsive component.
  •   6946⭐    297🍴 react-responsive) - Media queries in react for responsive design.
  •     14⭐      2🍴 reactponsive) - Responsive components and hooks.
  •  40127⭐   2474🍴 styled-components) - Visual primitives for the component age.
  •   7697⭐    253🍴 stitches) - CSS-in-JS with near-zero runtime, SSR, multi-variant support.

HTML Template

Isomorphic Apps

  •   5824⭐    208🍴 hypernova) - A service for server-side rendering your JavaScript views.
  •   1272⭐    143🍴 isomorphic-style-loader) - Isomorphic CSS style loader for Webpack.
  •   3893⭐    184🍴 react-server) - React framework with server render for blazing fast page load.
  •    612⭐     21🍴 rill) - Universal web application framework.
  •   1253⭐     59🍴 webpack-isomorphic-tools) - Server-side rendering for your Webpack-built applications (e.g. React).

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

  • 101993⭐  26616🍴 create-react-app) - Create React apps with no build configuration.
  •    185⭐     28🍴 crisp-react) - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
  •     38⭐      7🍴 cra-template-redux-auth-starter) - A Redux auth starter boilerplate for CRA.
  •  22757⭐   3780🍴 electron-react-boilerplate) - Live editing development on desktop app.
  •    150⭐     17🍴 elegant) - 🌎 docs - 🌎 demo - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.
  •    171⭐     28🍴 extensive-react-boilerplate) - Boilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI.
  •   1278⭐    183🍴 generator-starhackit) - Full-stack starter kit.
  •   5563⭐    333🍴 nwb) - CLI tool and devDependency for React apps & components and npm modules.
  • 🌎 nx - Next generation build system with first class monorepo support and powerful integrations.
  •    107⭐      6🍴 PBandJ) - Zero-Config Reusable Component Framework.
  •   3913⭐    880🍴 react-hot-boilerplate) - Minimal live-editing boilerplate for your next ReactJS project.
  •    568⭐     21🍴 rockpack) - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.
  •     25⭐      6🍴 create-react-dependency) - Create react dependencies with no build configuration.
  •    160⭐     17🍴 phoenix) - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
  •     87⭐     20🍴 react-enterprise-starter-kit) - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.

Miscellaneous

  •   1253⭐    101🍴 react-inlinesvg) - An SVG loader component for ReactJS.
  •     28⭐      3🍴 react-godfather) - A new way to write Functional Components, without Hooks.
  •   2129⭐    264🍴 redux-auth-patch) - Complete token authentication system for react + redux that supports isomorphic rendering.
  •   1403⭐     81🍴 redux-search) - Redux bindings for client-side search.
  •    202⭐     13🍴 tcomb-react) - Alternative syntax for PropTypes.
  •    187⭐      3🍴 react-universal-hooks) - 🎉 support react hooks everywhere (Functional or Class Component).

Utilities

Back to top ⬆️

  •   3706⭐    322🍴 qrcode.react) - A <QRCode/> component for use with React.
  •   1067⭐     51🍴 <qr-code>) – A no-dependencies, customizable, animate-able, SVG-based <qr-code> element.
  •    328⭐     24🍴 react-children-utilities) - Extended utils for React.Children.
  •   2443⭐    117🍴 react-media) - A CSS media query component for React.
  •     61⭐     10🍴 react-middle-ellipsis) - 🌎 demo - Truncate long strings in the middle instead of the end.
  •    321⭐     34🍴 react-translate-component) - Multi-lingual/localized text content.

i18n

Internationalization / L10n / localization / translation

  •   8992⭐   1020🍴 react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem.
  •  14099⭐   1347🍴 react-intl) - Internationalize React apps.
  •      9⭐      1🍴 react-localized) - Internationalization for React components based on gettext format.
  •     35⭐      7🍴 react-translate-maker) - Universal internationalization (i18n) open source library for React.
  •   1327⭐    152🍴 react-intl-universal) - 🌎 demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
  •    218⭐     24🍴 @tolgee/react) - 🌎 docs – Web-based localization tool enabling users to translate directly in the React app they develop
  •   4247⭐    363🍴 js-lingui) - 🌎 docs – A readable, automated, and optimized (5 kb) internationalization for JavaScript.

Framework bindings / integrations

  •    810⭐     72🍴 backbone-react-component) - A bit of nifty glue that automatically plugs your Backbone models.
  •    113⭐      0🍴 elm-react-component) - A React component which wraps an Elm module to be used in a React application.
  •    265⭐     32🍴 gl-react) - OpenGL / WebGL bindings for React to implement complex effects over images and content.
  •    132⭐      5🍴 react-backbone) - Backbone-aware mixins for react and a whole lot more.
  •   1513⭐     81🍴 react-d3-library) - Open source library for using D3 in React.
  •    778⭐     54🍴 react-elm-components) - Write React components in Elm.
  •    172⭐     15🍴 react-famous) - React bridge to Famo.us.
  •    288⭐     20🍴 react-localstorage) - Simple componentized localstorage implementation for Facebook's React.
  •    477⭐     51🍴 react-lottie-player) - 🌎 demo - Declarative lottie animation player.
  •   5066⭐    626🍴 react-on-rails) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
  •   1493⭐    164🍴 react-three-renderer) - Render into a three.js canvas using React.
  •     81⭐      4🍴 react-threejs) - Simplest bindings between React & Three.js
  •   3484⭐    398🍴 reactfire) - ReactJS mixin for easy Firebase integration.
  •    696⭐     45🍴 reactive-elements) - Allows to use React.js component as HTML element (web component).
  •   1665⭐    158🍴 react-unity-webgl) - Unity intergration with two-way communication using a built-in Event System.

Integrations with Third Party Services

  •   5132⭐    450🍴 react-ga) - React Google Analytics Module.
  •    111⭐      9🍴 react-google-analytics) - Google analytics component.
  •    454⭐    109🍴 react-google-autocomplete) - Google Places API components and hooks.
  •    632⭐     96🍴 react-recaptcha) - A react.js reCAPTCHA for Google.
  •    979⭐    162🍴 react-stripe-checkout) - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
  •      ?⭐      ?🍴 redux-segment) - Segment.io analytics integration for redux.
  •     15⭐      3🍴 react-slack-notification) - Send messages and error logs to a Slack channel directly.
  •   3540⭐    304🍴 react-firebase-hooks) - Hooks to integrate firebase in your application.

Performance

Back to top ⬆️

UI

  •  16016⭐    635🍴 inferno) - An extremely fast, React-like JavaScript library for building modern user interfaces.
  •    486⭐     41🍴 react-fastclick) - Fast Touch Events for React.
  •    222⭐     16🍴 react-static-container) - Renders static content efficiently.

Inspect

Lazy Load

  •    203⭐     39🍴 react-infinite-grid) - A React component which renders a grid of elements.
  •   2711⭐    273🍴 react-infinite) - A browser-ready efficient scrolling container based on UITableView.
  •    975⭐    165🍴 react-lazy-load) - React component that renders children elements when they enter the viewport.
  •   5827⭐    486🍴 react-lazyload) - Lazyload your Component, Image or anything matters the performance.
  •  26013⭐   3052🍴 react-virtualized) - React components for efficiently rendering large lists and tabular data.

App Size

Server-Side Rendering

  •    103⭐     10🍴 iSSR) - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
  •    672⭐     30🍴 react-esi) - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

Dev Tools

Back to top ⬆️

Test

  •    787⭐     73🍴 chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme.
  •  19962⭐   2017🍴 enzyme) - JavaScript Testing utilities for React.
  •  43672⭐   6359🍴 jest-cli) - Painless JavaScript Testing.
  •    194⭐     15🍴 react-unit) - Lightweight unit test library for ReactJS.
  •    496⭐     20🍴 redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction.
  •     16⭐      2🍴 rut) - React testing made easy with react-test-renderer. Supports DOM and custom renderers.
  •    187⭐     19🍴 unexpected-react) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
  •  62391⭐   3363🍴 playwright) enables reliable end-to-end testing for modern web apps.

Redux

Inspect

  • 🌎 fluxguard - PROD change monitoring that highlights all DOM + design changes.
  •    742⭐     95🍴 react-inspector) - Power of Browser DevTools inspectors right inside your React app.
  •    290⭐     71🍴 react-json-inspector) - React JSON inspector component.
  •  14609⭐    935🍴 reactotron) - A CLI and OS X app for inspecting your React JS and React Native apps.

Miscellaneous

  •     79⭐      8🍴 component-controls) - 🌎 demo - 🌎 docs - A next-generation tool to create blazing-fast documentation sites.
  •   8141⭐    344🍴 cosmos-js) - DX tool for designing truly encapsulated React components.
  •     55⭐      6🍴 react-demo-tab-cli) - CLI tool for creating demos of react components.
  •  10800⭐   1438🍴 react-styleguidist) - React style guide generator.
  •  28905⭐   2319🍴 standard-react) - JavaScript Standard Style Guide.
  • 🌎 Plasmic - Powerful design tool for building your React components visually.
  •     56⭐     11🍴 SimpleLocalize) - Open source CLI tool for finding i18n keys in React projects.
  •     63⭐      9🍴 react-device-frameset) - React device frameset component.

Miscellaneous

Back to top ⬆️

  •    179⭐     22🍴 DataFormsJS JSX Loader) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
  •   2127⭐    135🍴 html-to-react-components) - Extract annotated portions of HTML into React components as separate modules.
  •    939⭐    101🍴 htmltojsx) - Automatically AJAXify plain HTML with the power of React. It's magic!.
  •    166⭐     17🍴 jsonx) - React JSON Syntax.
  •   3607⭐    365🍴 mozaik) - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
  •   4438⭐    177🍴 react-blessed) - A react renderer for blessed.
  •      9⭐      4🍴 jsondiffpatch-react) - JSON diffing.

Static Website Generator

  •  55072⭐  10344🍴 gatsby) - Transform plain text into dynamic blogs and websites using React.js.

Cloud Solutions

Back to top ⬆️

Databases

  •    293⭐     18🍴 BCMS) - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.
  •     43⭐      5🍴 crisp-bigquery) - Full stack Google BigQuery with Express in TypeScript.
  •    298⭐     46🍴 react-server-routing-example) - Universal client/server routing and data with AWS DynamoDB.

Source

 40670⭐   3408🍴 brillout/awesome-react-components)