UI Components

• Chart

  • victory - Data viz for React.
  • react-muze - React wrapper for [muze](https://muzejs.org/)(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.
  • chartify - React.js plugin for building animated draggable and customizable charts.
  • react-chartjs-2 - Common react charting components using Chart.js 2.0.
  • EazyChart - [demo](https://docs.eazychart.com/#demos) - [docs](https://docs.eazychart.com) - Easily transform data into meaningful charts
  • SVAR React Gantt - [demo](https://docs.svar.dev/react/gantt/samples/#/base/willow) - [docs](https://docs.svar.dev/react/gantt/getting_started/) - Customizable, interactive Gantt chart component

• Collapse

  • react-accessible-accordion - Accessible Accordion component for React.
  • react-collapse - Component-wrapper for collapse animation with react-motion.
  • react-tabbordion - [demo](https://merri.github.io/react-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs.

• Command palette

  • cmdk - Fast, composable, unstyled command menu for React.
  • kbar - [demo](https://kbar.vercel.app) - Fast, portable, and extensible cmd+k interface.

• Custom Scrollbar

  • rc-scrollbars - [demo](https://rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS
  • react-custom-scroll - [demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) - Easily customize the browser scroll bar with native OS scroll behavior.
  • react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists.

• Editable data grid / spreadsheet

  • jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
  • 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](https://mui.com/x/react-data-grid/) - Fast and customizable data grid with advanced features for power users and complex use cases.
  • revo-grid - [demo/docs](https://revolist.github.io/revogrid/) - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid - [demo/docs](https://reactgrid.com/docs/) - Add spreadsheet-like behavior to your app
  • Handsontable - [demo](https://handsontable.com/demo) - [docs](https://handsontable.com/docs/react-data-grid/) - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.
  • SheetXL - performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
  • SVAR React DataGrid - [demo](https://docs.svar.dev/react/grid/samples/#/base/willow) - [docs](https://docs.svar.dev/react/grid/getting_started/) - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.
  • react-data-grid - Excel-like grid.

• Form Components

  • DevExtreme React Scheduler - High-performance plugin-based scheduler/calendar for Material Design.
  • jQWidgets Scheduler - Feature complete Scheduling library.
  • interweave-emoji-picker - A React based emoji picker powered by Interweave and Emojibase.
  • react-autowidth-input - Highly configurable & extensible automatically sized input field built with hooks.
  • date-range-picker - [demo](https://almogtavor.github.io/date-range-picker/) - A calendar component that supports date, range & ranges picks.
  • react-datepicker - A simple and reusable datepicker component for React.
  • react-day-picker - Flexible date picker for React.
  • react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field.
  • react-timezone-select - [demo](https://ndom91.github.io/react-timezone-select/) - Dynamic, succinct timezone select. Based on `react-select`.
  • 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/
  • react-payment-inputs - [demo](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--basic-no-styles) - A zero-dependency container to help with payment card input fields.
  • react-input-mask - [demo](http://sanniassin.github.io/react-input-mask/demo.html) - Yet another react component for input masking.
  • @lunasec/react-sdk - [docs](https://www.lunasec.io/docs/) - Secure, hardened form components that encrypt/tokenize all data automatically.
  • react-numpad - [demo](https://gpietro.github.io/react-numpad-demo/) - Extensible number pad control for numbers, dates and times.
  • react-multi-email - [demo](https://react-multi-email.vercel.app/) - Format multiple emails as the user types.
  • 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](https://based-ghost.github.io/react-functional-select/) - Micro-sized & micro-optimized select component for React.js.
  • react-mobile-picker - [demo](https://react-mobile-picker.vercel.app/) - 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](https://react-select-search.com/) - 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.
  • @anatoliygatt/heart-switch - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component.
  • react-ios-switch - React switch component.
  • ui-switch - The most complete _Toggle_ component
  • react-radio-group - Better radio buttons.
  • react-autocomplete-input - Autocomplete input field for React.
  • rich-textarea - A textarea to colorize, highlight, decorate texts and offer autocomplete.
  • react-tagsinput - A simple react component for inputing tags.
  • react-tokeninput - Tokeninput component for React.
  • tagify - [demo & docs](https://yaireo.github.io/tagify/) - Lightweight, efficient Tags input component.
  • react-input-autosize - Auto-resizing input field for React.
  • react-rating - [demo](https://react-rating.onrender.com/) - Zero-dependency, highly customizable rating component.
  • react-awesome-stars-rating - [demo](https://react-awesome-stars-rating.herokuapp.com/) - 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-drag-sizing - "Drag to resize" (sizing) as React Component.
  • react-dragula - Drag and drop so simple it hurts.
  • 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.
  • 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.
  • edtr-io - [demo](https://edtr.io/) - [docs](https://edtr.io/docs/getting-started) - 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](https://uiwjs.github.io/react-codemirror/) - CodeMirror component for React.
  • react-contenteditable - React component for a div with editable contents.
  • react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/).
  • react-editor - Simple richtext editor that can insert images and HTML.
  • react-medium-editor - medium-editor wrapper.
  • react-quill - Quill wrapper.
  • react-trumbowyg - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper.
  • remirror - [demo](https://remirror.io/playground) - [docs](https://remirror.io/docs) - ProseMirror toolkit for React.
  • slate - [demo](http://slatejs.org/) - [docs](https://docs.slatejs.org/) - A completely customizable framework for building rich text editors.
  • smartblock - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror.
  • tiptap - [demo](https://tiptap.dev/) - [docs](https://tiptap.dev/introduction) - The headless editor framework for web artisans.
  • react-simplemde-editor - React component wrapper for [EasyMDE (the most fresh SimpleMDE fork)](https://github.com/Ionaru/easy-markdown-editor).
  • react-markdown-editor - A markdown editor using React/Reflux.
  • react-md-editor - A simple markdown editor with preview, implemented with React.js and TypeScript.
  • react-avatar-editor - Facebook-like, avatar / profile picture component.
  • 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-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 &agrave; la carte set of polished, extensible, and accessible inputs.
  • @anatoliygatt/numeric-stepper - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-numeric-stepper-mllfyl) - 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-image-crop - A responsive image cropping tool for React.
  • react-avatar-generator - Generate fun kaleidoscope for user avatars.
  • react-flatpickr - Flatpickr for React.
  • react-credit-cards - Beautiful credit cards for your payment forms.
  • react-input-color - React input color component with hsv color picker.
  • react-toggle - An elegant, accessible toggle component for React. Also a glorified checkbox.
  • react-dropzone - Simple HTML5 drag-drop zone with React.js.
  • draft-js - A React framework for building text editors.
  • react-monacoeditor - Monaco Editor component for React.
  • react-image-cropper - Image cropper.
  • 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.
  • react-autowidth-input - Highly configurable & extensible automatically sized input field built with hooks.
  • react-simple-code-editor - Simple no-frills code editor with syntax highlighting
  • react-big-calendar - Gcal/outlook like calendar component.
  • formsy-material-ui - A Formsy compatibility wrapper for Material UI form components.
  • react-slider - Slider component for React.
  • react-mentions - Mention people in a textarea.
  • react-textarea-autosize - &lt;textarea /&gt; component for React which grows with content.
  • react-tag-input - A fantastically simple tagging component for your React projects.
  • react-dnd - Drag and Drop for React.
  • react-draggable - React draggable component.
  • react-easy-crop - Component to crop/rotate images/videos with easy interactions. Touch friendly.

• Icons

  • 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.
  • iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
  • react-open-doodles - Awesome free illustrations as react components.
  • Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
  • react-icons - Svg react icons of popular icon packs using ES6 imports.

• Infinite Scroll

  • @egjs/react-infinitegrid - [npm](https://www.npmjs.com/package/@egjs/react-infinitegrid) - [demo](https://naver.github.io/egjs-infinitegrid/storybook/) - A module used to arrange card elements including content infinitely according to various layout types.
  • @af-utils/virtual - [demo/docs](https://af-utils.com/virtual) - Render large scrollable lists and grids.
  • react-window - [demo](https://react-window.now.sh/) - React components for efficiently rendering large lists and tabular data
  • virtua - [demo](https://inokawa.github.io/virtua/) - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.
  • @egjs/react-infinitegrid - [npm](https://www.npmjs.com/package/@egjs/react-infinitegrid) - [demo](https://naver.github.io/egjs-infinitegrid/storybook/) - A module used to arrange card elements including content infinitely according to various layout types.
  • react-list - A versatile infinite scroll React component.

• Loader

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

• Map

  • pigeon-maps - [demo](https://pigeon-maps.js.org/) - ReactJS Maps without external dependencies.
  • react-geosuggest - A React autosuggest for the Google Maps Places API.
  • react-leaflet - React components for Leaflet maps.
  • react-svg-map - [demo](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map.
  • react-map-gl - A React wrapper for MapboxGL-js and overlay API.
  • 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.

• Markdown Viewer

  • react-markdown - Render Markdown as React components.

• Menu

  • react-burger-menu - An off-canvas sidebar with effects and styles.
  • react-offcanvas - Off-canvas menus for React.
  • react-planet - [demo](https://innfactory.github.io/react-planet/) - Create circular menus which looks like planets.
  • mantine-contextmenu - [demo/docs](https://icflorescu.github.io/mantine-contextmenu/) - Context-menu hook/component for applications built with Mantine UI.
  • hamburger-react - [demo/docs](https://hamburger-react.netlify.app/) - Animated hamburger menu icons for React.

• Miscellaneous

  • puck - [demo](https://puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React
  • react-advanced-news-ticker - [demo](https://www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component
  • react-awesome-query-builder - [demo](https://ukrbublik.github.io/react-awesome-query-builder/) - Visual query builder from form fields, with SQL, MongoDB and JSON export
  • react-blur - React component for blurred backgrounds.
  • fastcomments-react - [demo](<https://blog.fastcomments.com/(12-30-2019)-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA.
  • react-simple-chatbot - [demo](https://github.com/anishagg17/PIzzaBuilder) - 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](https://andreizanik.github.io/react-mouse-select/) A component that allows selecting DOM elements by moving the mouse
  • react-searchbox-awesome - [demo](https://axmz.github.io/react-searchbox-awesome-page/) - Minimalistic searchbox.
  • react-split-pane - React split-pane component.
  • react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does.
  • react-swipeable-list - [demo](https://marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items.
  • typography - A powerful toolkit for building websites with beautiful typography.
  • react-pulse-text - [demo/docs](https://kelsier90.github.io/React-Pulse-Text/) - 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.
  • @restpace/schema-form - [Demo](https://restspace.io/react/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.
  • react-facebook - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
  • react-pdf-viewer - [docs](https://react-pdf-viewer.dev) - A React component to view a PDF document.
  • react-resizable-and-movable - Resizable and movable component for React.
  • react-resizable-box - Resizable component for React. #reactjs.
  • react-demo-tab - [demo](https://mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components.
  • react-customizable-chat-bot - [Demo](https://chithakumar13.github.io/bot-example) - Build your own chatbot matching your brand needs in minutes.

• Notification

  • notistack - [demo](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js) - [docs](https://iamhosseindhv.com/notistack/api) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
  • Sonner - An opinionated toast component for React.
  • react-notifications-component - [demo](https://teodosii.github.io/react-notifications-component/) - Highly customizable and easy-to-use component for notifications.
  • react-local-toast - [demo](https://react-local-toast.netlify.app/showcase/) - [docs](https://react-local-toast.netlify.app/tutorial) - show feedback linked to particular component instead of app-wide toasts.
  • react-toast - [demo](https://codesandbox.io/s/byqvk) - [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md) - Minimal toast notifications.
  • react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs.
  • reapop - A React & Redux notifications system.
  • react-hot-toast - [demo](https://react-hot-toast.com/) - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
  • simple-react-notifications - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip).
  • notistack - [demo](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js) - [docs](https://iamhosseindhv.com/notistack/api) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
  • react-confirm-lite - [demo](https://stackblitz.com/edit/vitejs-vite-bfthlpmw) - 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.

• Overlay

  • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-modal - Accessible modal dialog component for React.