🚀 Absolutely Awesome React Components & Libraries

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

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

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

See also: Awesome React Frameworks.

Maintainers:

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

Contributing

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

Table of Contents

• UI Components

- 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 - Date / Time picker - Emoji picker - Input Types - Autocomplete - Select - Color Picker - Toggle - Slider - Radio Button - Type Select - Tag Input - Autosize Input / Textarea - Star Rating - Drag and Drop - Sortable List - Rich Text Editor - Markdown Editor - Image Editing - Form Component Collections - Miscellaneous - Syntax Highlight

• UI Layout
• UI Animation

- Parallax

• UI Frameworks

- Responsive - Material Design - Mobile - Component Collections

• UI Utilities

- Reporter - Visibility Reporter - Measurement Reporter - Device Input - Keyboard Events - Scroll Events - Touch Swipe - Mouse Events - Meta Tags - Portal - Test User Behavior

• Code Design

- Data Store - Form Logic - Router - Props from server - Communication with server - CSS / Style - HTML Template - Isomorphic Apps - Boilerplate - Miscellaneous

• Utilities

- i18n - Framework bindings / integrations - Integrations with Third Party Services

• Performance

- UI - Inspect - Lazy Load - App Size - Server-Side Rendering

• Dev Tools

- Test - Redux - Inspect - Miscellaneous

• Miscellaneous

- Static Website Generator

• Cloud Solutions

- Databases

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

• AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
• fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
• gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
• Handsontable - demo - docs - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.
• jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
• MUI X Data grid - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
• react-data-grid - Excel-like grid.
• ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
• revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
• SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
• SVAR React DataGrid - demo - docs - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.

Table

• ka-table - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
• mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features
• material-table - demo/docs - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
• mui-datatables - Built on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
• react-data-table - demo/docs - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
• TanStack Table - demo - Headless UI for building powerful tables & datagrids
• react-table-library - demo - React Table Library -- an almost headless table library -- for building better tables.
• rsuite-table - demo/docs - A table component that supports virtualized.
• DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
• Smart React Grid - Fast and feature-complete data grid with Material Design.
• simple-table - demo - docs - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.

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

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

Infinite Scroll

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

Overlay

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

• react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
• react-modal - Accessible modal dialog component for React.
• @paratco/async-modal - Simple async modal handler for React.
• reoverlay - demo - The missing solution for managing modals.
• sweetalert2 - demo/docs - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
• sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content

Notification

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

• react-notifications-component - demo - Highly customizable and easy-to-use component for notifications.
• notistack - demo - docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
• react-local-toast - demo - docs - show feedback linked to particular component instead of app-wide toasts.
• react-toast - demo - docs - Minimal toast notifications.
• 🚀 react-toastify - demo - best bet out there at the moment. Hooks support. No refs.
• react-confirm-lite - demo - is a lightweight, promise-based confirmation dialog for React with built-in Tailwind CSS support. It’s designed to be as simple to use as react-toastify, while remaining fully customizable.
• reapop - A React & Redux notifications system.
• react-hot-toast - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
• Sonner - An opinionated toast component for React.

Tooltip

• react-tooltip - React tooltip component.

Menu

Menus / sidebars

• hamburger-react - demo/docs - Animated hamburger menu icons for React.
• react-burger-menu - An off-canvas sidebar with effects and styles.
• react-offcanvas - Off-canvas menus for React.
• react-planet - demo - Create circular menus which looks like planets.
• mantine-contextmenu - demo/docs - Context-menu hook/component for applications built with Mantine UI.

Sticky

Fixed headers / scroll-up headers / sticky elements

• react-headroom - Hide your header until you need it.
• react-stickynode - A performant and comprehensive React sticky.

Tabs

• react-tabs - React tabs component.
• react-tabtab - React, tabs.

Loader

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

• react-loader-spinner - Collection set of react-spinner for async operation.
• react-redux-loading-bar - Simple Loading Bar for Redux and React.
• react-spinners-css - Amazing collection of react spinners components.
• react-spinners - A collection of loading spinner components for react.
• react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Captcha

• react-simple-captcha - npm - demo - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
• procaptcha - demo - docs - Privacy focused free CAPTCHA

Carousel

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

Buttons

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

Collapse

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

Chart

Display data in charts / graphs / diagrams

• essential js 2 charts - Beautiful and interactive charts & graphs for react.
• EazyChart - demo - docs - Easily transform data into meaningful charts
• echarts for react - Wrapper around beautiful Apache Echarts
• jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
• react-chartist - React component for Chartist.js.
• react-charty - demo - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
• react-chartjs-2 - Common react charting components using Chart.js 2.0.
• react-d3-components - 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.

Command palette

• cmdk - Fast, composable, unstyled command menu for React.
• kbar - demo - Fast, portable, and extensible cmd+k interface.

Tree

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.

UI Navigation

Ways to navigate views

• react-scroll - React scroll component.
• react-swipeable-views - A React Component for binded Tabs and Swipeable Views.

Custom Scrollbar

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

Audio / Video

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

Map

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

Time / Date / Age

Display time / date / age

• react-timeago - A simple time-ago component for ReactJs.
• timeago-react - Format date with * time ago statement. eg: '3 hours ago'.
• react-google-flight-datepicker - Google flight date picker implemented in ReactJS.

Photo / Image

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.

Icons

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.

Paginator

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.

Markdown Viewer

Display parsed markdow source

• react-markdown - Render Markdown as React components.

Canvas

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.

Screenshot

• html2canvas - Take screenshots of any part of your web page using Javascript.

Miscellaneous

• 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-demo.html>) - 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.

Form Components

Let the user enter data

Date / Time picker

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/

Emoji picker

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

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

Autocomplete

Autosuggest / autocomplete / typeahead

• react-autosuggest - WAI-ARIA compliant React autosuggest component.
• react-typeahead - Pure react-based typeahead and typeahead-tokenizer.

Select

• 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

Color Picker

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

Toggle

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

Slider

• react-slider - Slider component for React.

Radio Button

• react-radio-group - Better radio buttons.

Type Select

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.

Tag Input

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.

Autosize Input / Textarea

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

Star Rating

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

Drag and Drop

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

Sortable List

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.

Rich Text Editor

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

Markdown Editor

• 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 Editing

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.

Form Component Collections

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

Miscellaneous

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

Syntax Highlight

• 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

• 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

UI Animation

Back to top ⬆️

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

Parallax

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

UI Frameworks

Back to top ⬆️

Responsive

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 - Beauti

---

README truncated. View on GitHub