This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well:
- It solves a real problem
- It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
- It has recent code commits!
Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.
See also: Awesome React Frameworks.
Maintainers:
- @petebray, author of Fluxguard — monitor PROD website changes.
- @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
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.
- UI Components
- Editable data grid / spreadsheet
- Table
- Infinite Scroll
- Overlay
- Notification
- Tooltip
- Menu
- Sticky
- Tabs
- Loader
- Captcha
- Carousel
- Buttons
- Collapse
- Chart
- Command palette
- Tree
- UI Navigation
- Custom Scrollbar
- Audio / Video
- Map
- Time / Date / Age
- Photo / Image
- Icons
- Paginator
- Markdown Viewer
- Canvas
- Screenshot
- Miscellaneous
- Form Components
- UI Layout
- UI Animation
- UI Frameworks
- UI Utilities
- Code Design
- Utilities
- Performance
- Dev Tools
- Miscellaneous
- Cloud Solutions
- AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
- gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
- Handsontable - demo - docs - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.
- jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
- MUI X Data grid - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
- react-data-grid - Excel-like grid.
- ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
- revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
- SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
- SVAR React DataGrid - demo - docs - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.
-
ka-table - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
-
mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features
-
material-table - demo/docs - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
-
mui-datatables - Built on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
-
react-data-table - demo/docs - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
-
TanStack Table - demo - Headless UI for building powerful tables & datagrids
-
react-table-library - demo - React Table Library -- an almost headless table library -- for building better tables.
-
rsuite-table - demo/docs - A table component that supports virtualized.
-
DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
-
Smart React Grid - Fast and feature-complete data grid with Material Design.
-
simple-table - demo - docs - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.
-
KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
-
Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
- @egjs/react-infinitegrid - npm - demo - A module used to arrange card elements including content infinitely according to various layout types.
- react-lazyload - Lazyload your Component, Image or anything else where the performance matters.
- react-list - A versatile infinite scroll React component.
- @af-utils/virtual - demo/docs - Render large scrollable lists and grids.
- react-window - demo - React components for efficiently rendering large lists and tabular data
- virtua - demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.
Display overlay / modal / alert / dialog / lightbox / popup
- react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
- react-modal - Accessible modal dialog component for React.
- @paratco/async-modal - Simple async modal handler for React.
- reoverlay - demo - The missing solution for managing modals.
- sweetalert2 - demo/docs - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
- sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content
Toaster / snackbar — Notify the user with a modeless temporary little popup
- react-notifications-component - demo - Highly customizable and easy-to-use component for notifications.
- notistack - demo - docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
- react-local-toast - demo - docs - show feedback linked to particular component instead of app-wide toasts.
- react-toast - demo - docs - Minimal toast notifications.
- 🚀 react-toastify - demo - best bet out there at the moment. Hooks support. No refs.
- react-confirm-lite - demo - is a lightweight, promise-based confirmation dialog for React with built-in Tailwind CSS support. It’s designed to be as simple to use as react-toastify, while remaining fully customizable.
- reapop - A React & Redux notifications system.
- react-hot-toast - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
- Sonner - An opinionated toast component for React.
- react-tooltip - React tooltip component.
Menus / sidebars
- hamburger-react - demo/docs - Animated hamburger menu icons for React.
- react-burger-menu - An off-canvas sidebar with effects and styles.
- react-offcanvas - Off-canvas menus for React.
- react-planet - demo - Create circular menus which looks like planets.
- mantine-contextmenu - demo/docs - Context-menu hook/component for applications built with Mantine UI.
Fixed headers / scroll-up headers / sticky elements
- react-headroom - Hide your header until you need it.
- react-stickynode - A performant and comprehensive React sticky.
- react-tabs - React tabs component.
- react-tabtab - React, tabs.
Loaders / spinners / progress bars — Let the user know that something is loading
- react-loader-spinner - Collection set of react-spinner for async operation.
- react-redux-loading-bar - Simple Loading Bar for Redux and React.
- react-spinners-css - Amazing collection of react spinners components.
- react-spinners - A collection of loading spinner components for react.
- react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
- react-simple-captcha - npm - demo - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
- procaptcha - demo - docs - Privacy focused free CAPTCHA
- @egjs/react-flicking - npm - demo - It's reliable, flexible and extendable carousel.
- react-awesome-slider - demo - Fullpage, 3D animated, 60fps media and content slider/carousel.
- pure-react-carousel - Built from scratch and not highly opinionated.
- react-id-swiper - A library to use idangerous Swiper as a ReactJs component
- react-instagram-zoom-slider - demo - A slider component with pinch to zoom capabilities inspired by Instagram.
- react-responsive-carousel - React.js Responsive Carousel (with Swipe).
- react-slick - React carousel component.
- keen-slider - demo - Performant carousel/slider with native touch/swipe behavior.
- swiper - demo - docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
- react-awesome-button - demo - 3D animated 60fps buttons with load progress and social share actions.
- reactive-button - demo - docs - A beautiful animated button component with progress indicator.
- react-accessible-accordion - Accessible Accordion component for React.
- react-collapse - Component-wrapper for collapse animation with react-motion.
- react-tabbordion - demo - Universal, semantic and CSS-only components for creating Accordions and Tabs.
Display data in charts / graphs / diagrams
- essential js 2 charts - Beautiful and interactive charts & graphs for react.
- EazyChart - demo - docs - Easily transform data into meaningful charts
- echarts for react - Wrapper around beautiful Apache Echarts
- jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
- react-chartist - React component for Chartist.js.
- react-charty - demo - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
- react-chartjs-2 - Common react charting components using Chart.js 2.0.
- react-d3-components - D3 Components for React.
- react-google-charts - React-google-charts React component.
- react-highcharts - React-highcharts.
- react-sparklines - Beautiful and expressive Sparklines React component.
- react-timeseries-charts - Declarative timeseries charts.
- react-vis - Data visualization library based on React and d3.
- recharts - Redefined chart library built with React and D3.
- rumble-charts - React components for building composable and flexible charts.
- victory - Data viz for React.
- semiotic - Semiotic is a data visualization framework for React.
- SVAR React Gantt - demo - docs - Customizable, interactive Gantt chart component
- DevExtreme React Chart - High-performance plugin-based chart for Bootstrap and Material Design.
- Smart React Chart - Feature complete Charting library.
- react-muze - React wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
- Flowchart React - Flowchart & Flowchart designer for React.js.
- react-dashboard - Isomorphic Dashboards.
- cmdk - Fast, composable, unstyled command menu for React.
- kbar - demo - Fast, portable, and extensible cmd+k interface.
Display a tree data structure
- json-edit-react - demo - Highly configurable JSON/Object tree viewer and editor
- react-arborist - demo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
- react-complex-tree - demo - docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
- he-tree-react - demo - docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.
Ways to navigate views
- react-scroll - React scroll component.
- react-swipeable-views - A React Component for binded Tabs and Swipeable Views.
- rc-scrollbars - demo - Customizable scrollbars with flex options and 60FPS
- react-custom-scroll - demo - Easily customize the browser scroll bar with native OS scroll behavior.
- react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists.
- react-dailymotion - Dailymotion player component for React.
- react-player - A react component for playing a variety of URLs, including YouTube.
- react-soundplayer - Create custom SoundCloud players with React.
- react-youtube - React.js powered YouTube player component.
- video-react - A web video player built for the HTML5 world using React library.
- material-ui-audio-player - Audio player for material ui design.
- react-vision-camera - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
- 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.
- google-map-react - Universal google map react component, allows render react components on the google map.
- mapkit - A library for integrating Apple Maps using MapKit JS, with annotations, overlays, and search.
- pigeon-maps - demo - ReactJS Maps without external dependencies.
- react-geosuggest - A React autosuggest for the Google Maps Places API.
- react-leaflet - React components for Leaflet maps.
- react-map-gl - A React wrapper for MapboxGL-js and overlay API.
- react-svg-map - demo - A set of components to display an interactive SVG map.
Display time / date / age
- react-timeago - A simple time-ago component for ReactJs.
- timeago-react - Format date with
*** time agostatement. eg: '3 hours ago'. - react-google-flight-datepicker - Google flight date picker implemented in ReactJS.
Display images / photos
- lightGallery - demo - docs - Full-featured lightbox gallery component.
- react-compare-image - demo - React component to compare two images using a slider.
- react-image-gallery - Responsive image gallery, carousel, image slider react component.
- yet-another-react-lightbox - demo - docs - React lightbox component.
- react-intense - A React component for viewing large images up close.
- react-photo-album - demo - docs - Responsive React Photo Gallery.
- react-svg-pan-zoom - A React component that adds pan and zoom features to SVG.
- react-particle-image - demo - Render images as interactive particles.
- react-imgix - Add fast, responsive images as an image, picture, or background!
- @frameright/react-image-display-control - Define zoom regions for smart responsive images.
- zoom-image - demo - docs - A little yet powerful framework agnostic library to zoom image on the web
- react-infinite-gallery – Infinite-scroll image gallery component for React apps.
Display icons / icon set / emojis
- iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
- react-icons - Svg react icons of popular icon packs using ES6 imports.
- react-open-doodles - Awesome free illustrations as react components.
- 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.
- Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
Display a control element to paginate
- react-paginate - A ReactJS component that creates a pagination.
- react-laravel-paginex - Laravel Pagination with ReactJS (customizable).
- paginated - React render props & custom hook to build pagination.
- react-steps - Demo - Responsive React Stepper.
Display parsed markdow source
- react-markdown - Render Markdown as React components.
Sketch input using Canvas or SVG
- react-konva - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
- react-sketch - A Sketch tool for React based applications, backed-up by FabricJS
- react-sketch-canvas - Demo Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets
- react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
- html2canvas - Take screenshots of any part of your web page using Javascript.
- puck - demo - The self-hosted visual editor for React
- react-advanced-news-ticker - demo - A flexible and animated vertical news ticker component
- react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars.
- react-awesome-query-builder - demo - Visual query builder from form fields, with SQL, MongoDB and JSON export
- react-blur - React component for blurred backgrounds.
- react-demo-tab - demo - A React component to easily create demos of other components.
- fastcomments-react - demo - FastComments component for embedding a live comment thread on a page or SPA.
- react-pdf-viewer - docs - A React component to view a PDF document.
- react-simple-chatbot - demo - A simple chatbot component to create conversation chats.
- react-file-reader-input - File input component for control for file reading styling and abstraction.
- react-filter-control - The React filterbuilder component for building the filter criteria in the UI.
- 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.
- react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
- react-mouse-select - Demo A component that allows selecting DOM elements by moving the mouse
- react-resizable-and-movable - Resizable and movable component for React.
- react-resizable-box - Resizable component for React. #reactjs.
- react-searchbox-awesome - demo - Minimalistic searchbox.
- react-split-pane - React split-pane component.
- react-swipe-to-delete-ios - demo - To delete an item in a list the same way iOS does.
- react-swipeable-list - demo - Configurable component to render list with swipeable items.
- typography - A powerful toolkit for building websites with beautiful typography.
- react-pulse-text - demo/docs - Allows you to animate the text of any property of another component.
- captcha-image - Allows you to generate a random captcha image with options.
- react-pdf - Display PDFs in your React app as easily as if they were images.
- react-customizable-chat-bot - Demo - Build your own chatbot matching your brand needs in minutes.
- @restpace/schema-form - Demo - Easily build complex forms automatically from a JSON Schema.
- react-darkreader - A React Hook for adding a dark / night mode to your site inspired by darkreader.
- react-apple-signin-auth - Apple signin for React using the official Apple JS SDK.
- react-mrz-scanner - A React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer.
Let the user enter data
Date picker / time picker / datetime picker / date range picker
- date-range-picker - demo - A calendar component that supports date, range & ranges picks.
- react-big-calendar - Gcal/outlook like calendar component.
- react-datepicker - A simple and reusable datepicker component for React.
- react-day-picker - Flexible date picker for React.
- react-flatpickr - Flatpickr for React.
- react-simple-timefield - demo - Simple time input field.
- react-timezone-select - demo - Dynamic, succinct timezone select. Based on
react-select. - DevExtreme React Scheduler - High-performance plugin-based scheduler/calendar for Material Design.
- jQWidgets Scheduler - Feature complete Scheduling library.
- react-calendar - Ultimate calendar for your React app.
- react-date-picker - A date picker for your React app.
- schedule-x - Material design event calendar and date picker components. Demo site: https://schedule-x.dev/
- interweave-emoji-picker - A React based emoji picker powered by Interweave and Emojibase.
Masked inputs, specialized inputs; email / telephone number / credit card / etc.
- react-credit-cards - Beautiful credit cards for your payment forms.
- react-payment-inputs - demo - A zero-dependency container to help with payment card input fields.
- react-input-mask - demo - Yet another react component for input masking.
- @lunasec/react-sdk - docs - Secure, hardened form components that encrypt/tokenize all data automatically.
- react-numpad - demo - Extensible number pad control for numbers, dates and times.
- react-multi-email - demo - Format multiple emails as the user types.
Autosuggest / autocomplete / typeahead
- react-autosuggest - WAI-ARIA compliant React autosuggest component.
- react-typeahead - Pure react-based typeahead and typeahead-tokenizer.
- react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button.
- react-functional-select - demo - Micro-sized & micro-optimized select component for React.js.
- react-mobile-picker - demo - An iOS like select box component.
- react-select - A Select control built with and for React JS.
- react-column-select - A column select component built for react.
- react-select-search - demo - A lightweight select component for React
- coloreact - A tiny Color Picker for React.
- react-color - Is a tiny color picker widget component for React apps.
- react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
- react-input-color - React input color component with hsv color picker.
- @anatoliygatt/heart-switch - demo - A fully themeable and accessible heart-shaped toggle switch component.
- react-ios-switch - React switch component.
- react-toggle - An elegant, accessible toggle component for React. Also a glorified checkbox.
- ui-switch - The most complete Toggle component
- react-slider - Slider component for React.
- react-radio-group - Better radio buttons.
Let the user select something (e.g. a tag) while typing
- react-autocomplete-input - Autocomplete input field for React.
- react-mentions - Mention people in a textarea.
- rich-textarea - A textarea to colorize, highlight, decorate texts and offer autocomplete.
Let the user add multiple tags in a single input
- react-tag-input - A fantastically simple tagging component for your React projects.
- react-tagsinput - A simple react component for inputing tags.
- react-tokeninput - Tokeninput component for React.
- tagify - demo & docs - Lightweight, efficient Tags input component.
- react-input-autosize - Auto-resizing input field for React.
- react-autowidth-input - Highly configurable & extensible automatically sized input field built with hooks.
- react-textarea-autosize - <textarea /> component for React which grows with content.
- react-rating - demo - Zero-dependency, highly customizable rating component.
- react-awesome-stars-rating - demo - The star rating component with accessibility.
- react-star-rating-input - React.js component for entering 0-5 (or more) stars.
- react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
- react-dnd - Drag and Drop for React.
- react-drag-sizing - "Drag to resize" (sizing) as React Component.
- react-draggable - React draggable component.
- react-dragula - Drag and drop so simple it hurts.
- react-dropzone - Simple HTML5 drag-drop zone with React.js.
- react-movable - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
- react-sortable-pane - Sortable and resizable pane component for React.
- neodrag - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.
Let the user define an order on a list
- react-anything-sortable - Sort any children with touch support and IE8 compatibility.
- sortablejs - Lists reorderable by drag-and-drop, within and among lists.
- alloyeditor - WYSIWYG editor based on CKEditor with completely rewritten UI.
- ckeditor4-react - An official CKEditor 4 rich text editor wrapper.
- ckeditor5-react - An official CKEditor 5 rich text editor wrapper.
- draft-js - A React framework for building text editors.
- edtr-io - demo - docs - WYSIWYG in-line web editor with plugins.
- megadraft - Rich Text editor built on top of draft.js.
- react-ace - Ace (Advanced Code Editor) wraper.
- react-codemirror - demo - CodeMirror component for React.
- react-contenteditable - React component for a div with editable contents.
- react-draft-wysiwyg - WYSIWYG editor build on top of DraftJS.
- react-editor - Simple richtext editor that can insert images and HTML.
- react-medium-editor - medium-editor wrapper.
- react-monacoeditor - Monaco Editor component for React.
- react-simple-code-editor - Simple no-frills code editor with syntax highlighting
- react-quill - Quill wrapper.
- react-trumbowyg - Trumbowyg wrapper.
- remirror - demo - docs - ProseMirror toolkit for React.
- slate - demo - docs - A completely customizable framework for building rich text editors.
- smartblock - demo - docs - Block based WYSIWYG editor based on ProseMirror.
- tiptap - demo - docs - The headless editor framework for web artisans.
- react-simplemde-editor - React component wrapper for EasyMDE (the most fresh SimpleMDE fork).
- react-markdown-editor - A markdown editor using React/Reflux.
- react-md-editor - A simple markdown editor with preview, implemented with React.js and TypeScript.
Image manipulation
- react-avatar-editor - Facebook-like, avatar / profile picture component.
- react-avatar-generator - Generate fun kaleidoscope for user avatars.
- react-easy-crop - Component to crop/rotate images/videos with easy interactions. Touch friendly.
- react-image-crop - A responsive image cropping tool for React.
- react-image-cropper - Image cropper.
- react-advanced-cropper - A react cropper library to create the cropper exactly suited for your website design.
- react-mobile-cropper - A ready-to-use image cropping library highly inspirited by popular Android croppers. Based on
react-advanced-cropper.
- formsy-material-ui - A Formsy compatibility wrapper for Material UI form components.
- formsy-react-components - A set of React JS components for use in a formsy-react form.
- react-input-enhancements - Set of enhancements for input control.
- react-widgets - An à la carte set of polished, extensible, and accessible inputs.
- @anatoliygatt/numeric-stepper - demo - A fully themeable and accessible numeric stepper component.
- interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
- react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
- react-upload-gallery - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
- react-syntax-highlighter - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles.
Components to layout the app's UI
- autoresponsive-react - Auto responsive grid layout library.
- hedron - A no-frills flexbox grid system, powered by styled-components.
- m-react-splitters - Splitter component, written in TypeScript.
- muuri-react - demo - docs - Responsive, sortable, filterable and draggable grid layouts.
- react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
- react-layman - demo - Dynamic tiling layout manager with tabs
- react-masonry-component - Wrapper for @desandro's Masonry.
- react-reflex - Flex layout container component for advanced React web applications.
- react-spaces - demo/docs - Nestable anchored, resizable, scrollable components.
- react-stonecutter - Animated grid layout component.
- react-colrow - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
- react-schematic - demo - Build responsive layouts using styled schematics without an overhead of any theme configuration
Animate transitions
- data-driven-motion - Easily animate your data.
- react-animatable - An animation library using Web Animations API.
- react-anime - A super easy animation library.
- react-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
- react-gsap-enhancer - Use the full power of React and GSAP together.
- react-tsparticles - A lightweight component to easily create interactive particles animations
- react-motion - A spring that solves your animation problems.
- react-mt-svg-lines - Wrapper to animate the line stroke in SVGs.
- react-router-transition - Transitions built for react-router, powered by react-motion.
- react-spring - A spring physics based animation library.
- react-ts-typewriter - demo - Easy to use and customizable typewriter effect for any text.
- framer-motion - An animation and gesture library.
- react-spark-scroll - Scroll-based actions and animations for react.
- react-track - Track the position of DOM elements. Create cool animations.
- react-transitive-number - Apply transition effect to numeric strings, a la old Groupon timers.
- react-web-animation - React components for the Web Animations API -.
- auto-size-transition - A component that scale dynamically according to the internal children size
- react-particles-bg - Particles backgrounds.
- gooey-react - demo/docs - The gooey effect for React, used for shape blobbing / metaballs.
- react-voodoo - demo/samples - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc
- simple-parallax-js - demo - The easiest way to get a parallax effect with React and JavaScript on images
- react-parallax-tilt - demo - Easily apply parallax tilt hover effect on components.
Set of components + responsive layout system
- 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.
- carbon - demo/docs - A design system built by IBM.
- cdbreact - demo - docs - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
- chakra-ui - demo/docs - Simple, Modular & Accessible UI Components for your React Applications.
- ChatUI - demo/docs - The UI design language and React library for Conversational UI
- CoreUI for React - demo/docs - Open Source UI components library.
- evergreen - demo/docs - Evergreen React UI Framework by Segment.
- fluentui - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
- gestalt - demo/docs - A set of components that supports Pinterest’s design language.
- grommet - The most advanced UX framework for enterprise applications.
- kokonut-ui - Free Modern and Customizable UI components.
- Mantine - demo/docs - A fully featured library with 100+ hooks and components with native dark theme support
- orbit - Components for building travel oriented projects.
- flowbite-react - Open-source UI component library based on React, Tailwind CSS, and Flowbite.
- 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.
- react-bootstrap - Bootstrap components built with React.
- react-foundation - Foundation as React components.
- reakit - demo/docs Toolkit for building accessible rich web apps
- searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
- semantic-ui-react - The official Semantic-UI-React integration.
- semi-design - demo/docs - A modern, comprehensive, flexible design system.
- shadcn/ui - demo - docs - Beautifully designed components that you can copy and paste into your apps.
- shineout - demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
- Tremor - demo - docs - Open-source components to build charts and dashboards.
- untitled-ui-react - demo - Beautifully crafted collection of components built with React Aria and Tailwind CSS.
- 🚀 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.
- react-essence - Essence - The Essential Material Design Framework.
- react-materialize - Material design for react, powered by materializecss.
- react-toolbox - A set of React components implementing Google's Material Design.
- mdbootstrap - React Bootstrap with Material Design
- 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.
- 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.
- shards-react - docs/demo - A beautiful and modern React design system. Freemium.
- aframe-react - Build virtual reality experiences with A-Frame and React.
- react-admin - Build admin user experiences on top of REST and GraphQL services.
- refine - demo - docs - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
- matrix-card - demo - Simplest possible component to generate matrix rain style cards.
- rsuite - demo/docs - Suite of components for "enterprise system products".
- lens-ui - docs - A Suit of components focused on simplicity.
- Tailwindadmin - docs - A collection of Ready-made ShadCN UI components you can directly plug into your React/Next.js projects.
Report computed styles
Report when a component becomes visible/hidden
- react-intersection-observer - React implementation of the Intersection Observer API.
- react-visibility-sensor - Sensor component.
- react-waypoint - A React component to execute a function whenever you scroll to an element.
Determine and report measurements of an element
- react-component-queries - Provide props to your Components based on their Width and/or Height.
- react-container-dimensions - Wrapper component that detects element resize.
- react-dimensions - React higher-order component to get dimensions of container.
- react-height - Component-wrapper to determine and report children elements height.
- react-measure - Compute measurements of a React component.
- react-sizeme - Make your React Components aware of their width and height.
Turn user input into actions
- react-hotkeys - Declarative hotkey and focus area management for React.
- react-key-handler - React component to handle keyboard events.
- react-keydown - Lightweight keydown wrapper for React components.
- react-shortcuts - Manage keyboard shortcuts from one place.
- useKeyCapture - A custom hook to ease the key-press listeners of a target/global.
- react-keyboard-navigator - A suite of React components and hook for selecting sibling components through the keyboard.
- react-scroll-components - A set of components that react to page scrolling.
- react-swipe - Swipe.js as a React component.
- react-hook-mighty-mouse - demo - Hook that tracks mouse events on selected element.
Set meta tags, <title>, children of
- react-helmet-async - Thread-safe Helmet for React 16+ and friends
- react-helmet - A document head manager for React.
Render an element at an arbitrary DOM node
- react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React.
- react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.
A/B tests, experiments, ...
- react-experiments - React components for implementing UI experiments.
Libraries that help with code design
Data flow / data management / data stores / components state / data flow
- baobab-react - React integration for Baobab.
- cerebral - A state controller with its own debugger.
- effector-react - React bindings for effector, an effective multi-store state manager.
- fireproof - demo - docs Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend
- RxDB - demo - docs A fast, local first, reactive Database for JavaScript Applications
- fluxible - A pluggable container for universal flux applications.
- kea - High level architecture for React apps.
- react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
- react-redux - Official React bindings for Redux.
- redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification.
- redux - Predictable state container for JavaScript apps.
- reselect - Selector library for Redux.
- resourcerer - Declarative data-fetching framework for REST APIs
- synergies - docs A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.
- zustand - docs - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
- teaful - Tiny, easy and powerful React state management
- data-driven-forms - A declarative way for building forms with all the functionality.
- formik - Build forms without tears and supports Validation in ease.
- formsy-react - A form input builder and validator for React JS.
- Phormal - Docs & Demos - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.
- react-hook-form - React hooks for form validation without the hassle.
- react-jsonschema-form - A React component for building Web forms from JSONSchema.
- react-client-validation - Simple and super lightweight validation for React.
- react-final-form - Subscription-based form state management
- react-formawesome - Complex library for creating awesome forms.
- surveyjs - The advanced Survey and Form library
- Formily - High performance, extensible, and Typescript friendly
- hook-form-react - docs - A lightweight, dependency-free solution React hooks for form validation.
- react-router-component - Declarative router component for React.
- react-router-scroll - React Router scroll management.
- react-router - A complete routing library for React.
- redux-first-history - Redux First History - Redux history binding support react-router - @reach/router - wouter
- universal-router - A simple middleware-style router for isomorphic JavaScript web apps.
- wouter - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.
- tanstack-router - Type-safe router with built-in caching & URL state management
Component properties asynchronously fetched over the network
- react-refetch - A simple, declarative, and composable way to fetch data for React components.
- redux-connect - Provides decorator for resolving async props in react-router.
- axios-react - HTTP client component for React.
- apollo-client - A simple caching client for any GraphQL server and UI framework.
- react-relay - Relay is a JavaScript framework for building data-driven React applications.
- query - docs Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
- 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.
- aphrodite - It's inline styles, but they work!.
- inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
- @classmatejs/react - A class name focused component builder with a syntax like styled components and the sugar of cva's variants.
- react-container-query - Modular responsive component.
- react-responsive - Media queries in react for responsive design.
- reactponsive - Responsive components and hooks.
- styled-components - Visual primitives for the component age.
- stitches - CSS-in-JS with near-zero runtime, SSR, multi-variant support.
- jsx-control-statements - Neater If and For for React JSX.
- hypernova - A service for server-side rendering your JavaScript views.
- isomorphic-style-loader - Isomorphic CSS style loader for Webpack.
- react-server - React framework with server render for blazing fast page load.
- rill - Universal web application framework.
- webpack-isomorphic-tools - Server-side rendering for your Webpack-built applications (e.g. React).
Scaffold / starter kit / Yeoman generator / stack ensemble / seed
- create-react-app - Create React apps with no build configuration.
- crisp-react - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
- cra-template-redux-auth-starter - A Redux auth starter boilerplate for CRA.
- electron-react-boilerplate - Live editing development on desktop app.
- elegant - docs - demo - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.
- 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.
- generator-starhackit - Full-stack starter kit.
- 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.
- PBandJ - Zero-Config Reusable Component Framework.
- react-hot-boilerplate - Minimal live-editing boilerplate for your next ReactJS project.
- rockpack - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.
- create-react-dependency - Create react dependencies with no build configuration.
- phoenix - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
- react-enterprise-starter-kit - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
- Tailwindadmin - Free Shadcn Dashboard Template Built On React and Tailwind CSS comes with Multiple-framework support
- react-inlinesvg - An SVG loader component for ReactJS.
- react-godfather - A new way to write Functional Components, without Hooks.
- react-vvm - A new approach to MVVM in React, to enforce clean separation of concerns, reduce boilerplate, and automatic re-render optimization for scalable UI logic.
- react-call - Call your React components.
- redux-auth-patch - Complete token authentication system for react + redux that supports isomorphic rendering.
- redux-search - Redux bindings for client-side search.
- tcomb-react - Alternative syntax for PropTypes.
- react-universal-hooks - 🎉 support react hooks everywhere (Functional or Class Component).
- qrcode.react - A <QRCode/> component for use with React.
<qr-code>– A no-dependencies, customizable, animate-able, SVG-based<qr-code>element.- react-children-utilities - Extended utils for React.Children.
- react-media - A CSS media query component for React.
- react-middle-ellipsis - demo - Truncate long strings in the middle instead of the end.
- react-translate-component - Multi-lingual/localized text content.
Internationalization / L10n / localization / translation
- react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
- react-intl - Internationalize React apps.
- react-localized - Internationalization for React components based on
gettextformat. - react-translate-maker - Universal internationalization (i18n) open source library for React.
- react-intl-universal - demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
- @tolgee/react - docs – Web-based localization tool enabling users to translate directly in the React app they develop
- js-lingui - docs – A readable, automated, and optimized (5 kb) internationalization for JavaScript.
- backbone-react-component - A bit of nifty glue that automatically plugs your Backbone models.
- elm-react-component - A React component which wraps an Elm module to be used in a React application.
- gl-react - OpenGL / WebGL bindings for React to implement complex effects over images and content.
- react-backbone - Backbone-aware mixins for react and a whole lot more.
- react-d3-library - Open source library for using D3 in React.
- react-elm-components - Write React components in Elm.
- react-famous - React bridge to Famo.us.
- react-localstorage - Simple componentized localstorage implementation for Facebook's React.
- react-lottie-player - demo - Declarative lottie animation player.
- react-on-rails - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
- react-three-renderer - Render into a three.js canvas using React.
- react-threejs - Simplest bindings between React & Three.js
- reactfire - ReactJS mixin for easy Firebase integration.
- reactive-elements - Allows to use React.js component as HTML element (web component).
- react-unity-webgl - Unity intergration with two-way communication using a built-in Event System.
- react-ga - React Google Analytics Module.
- react-google-analytics - Google analytics component.
- react-google-autocomplete - Google Places API components and hooks.
- react-recaptcha - A react.js reCAPTCHA for Google.
- 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.
- react-slack-notification - Send messages and error logs to a Slack channel directly.
- react-firebase-hooks - Hooks to integrate firebase in your application.
- inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
- react-fastclick - Fast Touch Events for React.
- react-static-container - Renders static content efficiently.
- react-perf-tool - Debug performance of your React application.
- react-render-visualizer - Render visualizer for ReactJS.
- react-infinite-grid - A React component which renders a grid of elements.
- react-infinite - A browser-ready efficient scrolling container based on UITableView.
- react-lazy-load - React component that renders children elements when they enter the viewport.
- react-lazyload - Lazyload your Component, Image or anything matters the performance.
- react-virtualized - React components for efficiently rendering large lists and tabular data.
- babel-plugin-transform-react-remove-prop-types - Remove unnecessary React propTypes.
- react-lite - An implementation of React that optimizes for small script size.
- iSSR - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
- react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments
- enzyme - JavaScript Testing utilities for React.
- jest-cli - Painless JavaScript Testing.
- react-unit - Lightweight unit test library for ReactJS.
- redux-test-recorder - A redux middleware to automatically generate tests for reducers through ui interaction.
- rut - React testing made easy with
react-test-renderer. Supports DOM and custom renderers. - unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
- playwright enables reliable end-to-end testing for modern web apps.
- redux-devtools-chart-monitor - A chart monitor for Redux DevTools.
- redux-devtools-dock-monitor - A resizable and movable dock for Redux DevTools monitors.
- redux-devtools-filterable-log-monitor - Filterable tree view monitor for Redux DevTools.
- redux-devtools-inspector - Another Redux DevTools Monitor.
- redux-devtools-log-monitor - The default monitor for Redux DevTools with a tree view.
- redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI.
- remote-redux-devtools - Redux DevTools remotely.
- fluxguard - PROD change monitoring that highlights all DOM + design changes.
- react-inspector - Power of Browser DevTools inspectors right inside your React app.
- reactotron - A CLI and OS X app for inspecting your React JS and React Native apps.
- Tail Lens - Tailwind editor in browser : Inspect, edit, preview, copy.
- component-controls - demo - docs - A next-generation tool to create blazing-fast documentation sites.
- cosmos-js - DX tool for designing truly encapsulated React components.
- react-demo-tab-cli - CLI tool for creating demos of react components.
- react-styleguidist - React style guide generator.
- standard-react - JavaScript Standard Style Guide.
- Plasmic - Powerful design tool for building your React components visually.
- SimpleLocalize - Open source CLI tool for finding i18n keys in React projects.
- react-device-frameset - React device frameset component.
- DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
- html-to-react-components - Extract annotated portions of HTML into React components as separate modules.
- htmltojsx - Automatically AJAXify plain HTML with the power of React. It's magic!.
- jsonx - React JSON Syntax.
- mozaik - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
- react-blessed - A react renderer for blessed.
- jsondiffpatch-react - JSON diffing.
- iron-session - Secure, stateless, and cookie-based session library.
- gatsby - Transform plain text into dynamic blogs and websites using React.js.
- BCMS - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.
- crisp-bigquery - Full stack Google BigQuery with Express in TypeScript.
- react-server-routing-example - Universal client/server routing and data with AWS DynamoDB.