awesome-react-components

Curated List of React Components & Libraries.
https://github.com/eric-erki/awesome-react-components

Last synced: 1 day ago
JSON representation

UI Components
- Custom Scrollbar
  - react-scrollbar - Scrollbar component for React.
  - react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists.
- Editable data grid / spreadsheet
  - gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  - ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  - react-data-grid - Excel-like grid.
- Form Components
  - interweave-emoji-picker - A React based emoji picker powered by Interweave and Emojibase.
  - react-calendar - A modular toolkit to build calendar-related things in React.
  - react-datepicker - A simple and reusable datepicker component for React.
  - react-datepicker2 - [demo](https://mberneti.github.io/react-datepicker2/) - [docs](https://mberneti.github.io/react-datepicker2/) A simple and reusable datepicker component (with persian jalali calendar support).
  - react-day-picker - Flexible date picker for React.
  - react-nice-dates - [demo/docs](https://reactnicedates.hernansartorio.com/) A responsive, touch-friendly, and modular date picker library.
  - 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-yearly-calendar - React.js Yearly Calendar Component.
  - r-date-picker - React.js high customize date picker component, easy style it.
  - 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.
  - react-maskedinput - Masked <input/> React component.
  - react-numpad - [demo](https://gpietro.github.io/react-numpad-demo/) - Extensible number pad control for numbers, dates and times.
  - 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-select-box - An accessible select box component for React.
  - react-select - A Select control built with and for React JS.
  - react-selectize - A Stateless & Flexible Select component for React inspired by Selectize.
  - coloreact - A tiny Color Picker for React.
  - react-color - Color Pickers from Sketch, Photoshop, Chrome & more.
  - react-ios-switch - React switch component.
  - react-radio-group - Better radio buttons.
  - react-autocomplete-input - Autocomplete input field for React.
  - @pathofdev/react-tag-input - [demo & docs](https://pathof.dev/projects/react-tag-input) - Minimal tagging component with editable tags
  - react-tagsinput - A simple react component for inputing tags.
  - react-tokeninput - Tokeninput component for React.
  - react-input-autosize - Auto-resizing input field for React.
  - 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-dragula - Drag and drop so simple it hurts.
  - react-sortable-pane - Sortable and resizable pane component for React.
  - react-anything-sortable - Sort any children with touch support and IE8 compatibility.
  - react-sortable-hoc - Higher-order components to turn any list into an animated, touch-friendly, sortable list.
  - react-sortable - A sortable list component built with React.
  - sortablejs - Lists reorderable by drag-and-drop, within and among lists.
  - alloyeditor - WYSIWYG editor based on CKEditor with completely rewritten UI.
  - megadraft - Rich Text editor built on top of draft.js.
  - react-ace - Ace (Advanced Code Editor) wraper.
  - react-codemirror - CodeMirror wrapper.
  - react-contenteditable - React component for a div with editable contents.
  - react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/).
  - react-medium-editor - medium-editor wrapper.
  - react-quill - Quill wrapper.
  - react-trumbowyg - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper.
  - ritzy - Collaborative web-based rich text editor.
  - react-markdown-editor - A markdown editor using React/Reflux.
  - react-md-editor - Markdown editor.
  - react-avatar-editor - Facebook-like, avatar / profile picture component.
  - 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.
  - interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  - react-image-crop - A responsive image cropping tool for React.
  - react-date-range - A React component for choosing dates and date ranges.
  - react-datetime - A lightweight but complete datetime picker react component.
  - 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-star-rating - A simple star rating component built with React.
  - react-dropzone - Simple HTML5 drag-drop zone with React.js.
  - draft-js - A React framework for building text editors.
  - 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-big-calendar - Gcal/outlook like calendar component.
  - react-avatar-cropper - Aiming to be a complete solution for avatar cropping in react.
  - formsy-material-ui - A Formsy compatibility wrapper for Material-UI form components.
  - react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
  - react-triple-toggle - ⚛️ React multi toggle component.
  - react-slider - Slider component for React.
  - react-mentions - Mention people in a textarea.
  - react-textarea-autosize - <textarea /> 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.
  - react-text-mask - Input mask for React, Angular, and vanilla JavaScript. Flexible, robust & tiny.
- Icons
  - 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.
- Infinite Scroll
  - react-recycled-scrolling - [npm](https://www.npmjs.com/package/react-recycled-scrolling) - [demo](https://y8mlf.csb.app/) - Simulate scrolling using fixed number of DOM elements for large lists with React Hooks
  - react-list - A versatile infinite scroll React component.
- Loader
  - react-loader - React component that displays a spinner via spin.js until your component is loaded.
  - react-block-ui - Easy way to block the user from interacting with your UI.
  - react-loaders - Lightweight wrapper around Loaders.css.
  - react-md-spinner - Material Design spinner components for React.js.
  - react-progress-button - Simple react.js component for an inline progress indicator.
  - react-redux-loading-bar - Simple Loading Bar for Redux and React.
  - react-spinkit - A collection of loading indicators animated with CSS for React.
  - react-spinners-css - Amazing collection of react spinners components.
  - react-progress-label - Progress label component.
- Map
  - react-geosuggest - A React autosuggest for the Google Maps Places API.
  - react-gmaps - A Google Maps component for React.js.
  - react-leaflet - React components for Leaflet maps.
  - react-mapbox-gl - A React binding of mapbox-gl-js.
  - 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.
- Markdown Viewer
  - react-markdown - Render Markdown as React components.
- Menu
  - react-burger-menu - An off-canvas sidebar with effects and styles.
  - react-contextmenu - Context Menu implemented in React.
  - react-offcanvas - Off-canvas menus for React.
  - react-sidebar - A sidebar component for React.
- Miscellaneous
  - material-color-hash - Hash strings to Material UI colors.
  - 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.
  - 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-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
  - react-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
  - 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.
  - typography - A powerful toolkit for building websites with beautiful typography.
  - react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars.
  - 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-avatar - Universal React avatar component makes it possible to generate avatars based on user information.
- Notification
  - cogo-toast - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, Promise support, inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_
  - react-notifications-component - [demo](https://teodosii.github.io/react-notifications-component/) - Highly customizable and easy-to-use component for notifications.
  - react-notification - Snackbar notifications for React.
  - react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs.
  - react-toast-notifications - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system.
  - reapop - A React & Redux notifications system.
  - react-snackbar-alert - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API.
  - 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
- Overlay
  - boron - A collection of dialog animations with React.js.
  - modali - A delightful modal dialog component, built from the ground up to support React Hooks.
  - react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  - react-dock - Resizable dockable react component.
  - react-modal - Accessible modal dialog component for React.
  - react-skylight - A react component for modals and dialogs.
- Paginator
  - react-paginate - A ReactJS component that creates a pagination.
  - react-laravel-paginex - Laravel Pagination with ReactJS (customizable).
- Photo / Image
  - react-image-gallery - Responsive image gallery, carousel, image slider react component.
  - react-images - A simple lightbox component for displaying an array of images.
  - react-intense - A React component for viewing large images up close.
  - react-photo-gallery - Responsive React Photo Gallery.
  - react-svg-pan-zoom - A React component that adds pan and zoom features to SVG.
  - react-compare-image - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider.
  - react-image-lightbox - React lightbox component.
- Sticky
  - react-headroom - Hide your header until you need it.
  - react-sticky - <Sticky /> component for awesome React apps.
  - react-stickynode - A performant and comprehensive React sticky.
- Table
  - griddle-react - Simple grid component that can display data as a table, a list of cards, or on the map.
  - ka-table - [demo](https://komarovalexander.github.io/ka-table/#/command-column) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc. 🆕
  - material-table - [demo/docs](https://material-table.com/) - 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](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
  - react-pivot - Data-grid component with pivot-table-like for data display, filtering, and exploration.
  - rsuite-table - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized.
  - sematable - Client side sorting, pagination, and text filter for redux/react based apps.
  - react-table - [demo](https://github.com/tannerlinsley/react-table/blob/master/docs/examples.md) - Hooks for building fast and extendable tables and datagrids
- Tabs
  - react-tabs - React tabs component.
  - react-tabtab - React, tabs.
- Time / Date / Age
  - react-timeago - A simple time-ago component for ReactJs.
  - timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'.
- Tooltip
  - react-portal-tooltip - Awesome React tooltips.
  - react-tooltip - React tooltip component.
- Tree
  - react-treeview - Easy, light, flexible tree view made with React.
  - react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
  - react-ui-tree - React tree component.
- UI Navigation
  - react-scroll - React scroll component.
  - react-swipeable-views - A React Component for binded Tabs and Swipeable Views.
UI Frameworks
- Component Collections
  - blueprint - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  - shards-react - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium 💰
  - react-admin - Build admin user experiences on top of REST and GraphQL services.
  - react-desktop - React UI Components for macOS Sierra and Windows 10.
  - react-stack-cards - Collection of stack card effects for galleries and preview grids.
  - rsuite - [demo/docs](https://rsuitejs.com/) - Suite of components for "enterprise system products".
  - aframe-react - Build virtual reality experiences with A-Frame and React.
  - dataminr-react-components - Collection of reusable React Components and utility functions.
- Mobile
  - antd-mobile - Configurable Mobile UI from China.
  - OnsenUI - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.
  - Ionic React - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
- Responsive
  - atlaskit - Atlassian's official UI library, with components from _badge_ to _tree table_.
  - ant-design - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available.
  - belle - Configurable React Components with great UX.
  - carbon - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM.
  - chakra-ui - [demo/docs](https://chakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications.
  - evergreen - [demo/docs](https://evergreen.segment.com) - Evergreen React UI Framework by Segment.
  - grommet - The most advanced UX framework for enterprise applications.
  - gestalt - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language.
  - pivotal-ui-react - React components based on a custom version of the Bootstrap library.
  - primereact - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
  - react-bootstrap - Bootstrap components built with React.
  - react-foundation-apps - Foundation Apps components built with React.
  - 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.
  - shineout - [demo](https://shine.wiki/1.4.x/en/components/GetStart) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Programming Languages

JavaScript 290 TypeScript 88 CSS 4 CoffeeScript 3 SCSS 2 LiveScript 1 Rust 1 Ruby 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-react-components

UI Components

Custom Scrollbar

Editable data grid / spreadsheet

Form Components

Icons

Infinite Scroll

Loader

Map

Markdown Viewer

Menu

Miscellaneous

Notification

Overlay

Paginator

Photo / Image

Sticky

Table

Tabs

Time / Date / Age

Tooltip

Tree

UI Navigation

UI Frameworks

Component Collections

Mobile

Responsive