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

Maintainers:

@petebray, author of Fluxguard — monitor PROD website changes.
@brillout, author of vite-plugin-ssr (like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin) and Telefunc (remote functions instead of APIs).

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.

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX 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.
revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

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

@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-virtual-scroll - demo/docs - Render large scrollable lists and tables.
react-window - demo - React components for efficiently rendering large lists and tabular data
virtua - demo - Simple, fast, small and flexible virtual scroller.

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.
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.
reapop - A React & Redux notifications system.
simple-react-notifications - demo - Tiny notification library (1kb gzip).
react-hot-toast - demo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.

Tooltip

react-tooltip - React tooltip component.

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

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

chartify - React.js plugin for building animated draggable and customizable charts.
essential js 2 charts - Beautiful and interactive charts & graphs for react.
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-dazzle - Dashboards made easy in React JS.
react-google-charts - React-google-charts React component.
react-highcharts - React-highcharts.
react-sigmajs - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
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.
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

kbar - demo - Fast, portable, and extensible cmd+k interface.

Tree

Display a tree data structure

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
react-treeview - Easy, light, flexible tree view made with React.

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.
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-mapbox-gl - A React binding of mapbox-gl-js.
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

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.

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.
react-facebook - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
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.

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-date-range - A React component for choosing dates and date ranges.
react-datepicker - A simple and reusable datepicker component for React.
react-datepicker2 - demo - docs A simple and reusable datepicker component (with persian jalali calendar support).
react-datetime - A lightweight but complete datetime picker react component.
react-day-picker - Flexible date picker for React.
react-flatpickr - Flatpickr for React.
react-nice-dates - demo/docs A responsive, touch-friendly, and modular date picker library.
react-simple-timefield - demo - Simple time input field.
react-timezone-select - demo - Dynamic, succinct timezone select. Based on react-select.
react-yearly-calendar - React.js Yearly Calendar Component.
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.

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.
golden-layout - A multi-screen JavaScript Layout manager.
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-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

react-parallax-component - Easiest way to add scroll parallax effect on the component.
react-parallax-tilt - demo - Easily apply parallax tilt hover effect on components.

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!
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.
geist-ui - Modern and minimalist React UI library.
gestalt - demo/docs - A set of components that supports Pinterest’s design language.
grommet - The most advanced UX framework for enterprise applications.
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.
shineout - demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

🚀 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

Mobile

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

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.

UI Utilities

Back to top ⬆️

Reporter

Report computed styles

Visibility Reporter

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.

Measurement Reporter

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.

Device Input

Turn user input into actions

Keyboard Events

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.

Scroll Events

react-scroll-components - A set of components that react to page scrolling.

Touch Swipe

react-swipe - Swipe.js as a React component.

Mouse Events

react-hook-mighty-mouse - demo - Hook that tracks mouse events on selected element.

Meta Tags

Set meta tags,

awesome/awesome-react-components .gitee-modal { width: 500px !important; }

🚀 Absolutely Awesome React Components & Libraries

Contributing

Table of Contents

UI Components

Editable data grid / spreadsheet

Table

Infinite Scroll

Overlay

Notification

Tooltip

Menu

Sticky

Tabs

Loader

Carousel

Buttons

Collapse

Chart

Command palette

Tree

UI Navigation

Custom Scrollbar

Audio / Video

Map

Time / Date / Age

Photo / Image

Icons

Paginator

Markdown Viewer

Canvas

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

简介

发行版

贡献者 (1)

近期动态

搜索帮助

awesome/awesome-react-components