awesome-react-components

a list of some react components, by https://twitter.com/petebray, not a very good one at that
https://github.com/anthonybrown/awesome-react-components

Last synced: 12 days ago
JSON representation

UI Components
- Form Components
  - react-datepicker - A simple and reusable datepicker component for React.
  - react-daterange-picker - A React based date range picker.
  - react-day-picker - Flexible date picker for React.
  - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field.
  - react-yearly-calendar - React.js Yearly Calendar Component.
  - r-date-picker - React.js high customize date picker component, easy style it.
  - react-input-mask - Yet another react component for input masking.
  - react-maskedinput - Masked <input/> React component.
  - react-numpad - A numpad for number, date and time, built with and for React. It's written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form.
  - react-autosuggest - WAI-ARIA compliant React autosuggest component.
  - react-typeahead-component - Typeahead, written using the React.js library.
  - 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.
  - rc-slider - React Slider.
  - 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-droparea - Drag and Drop library for React.
  - 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.
  - alloyeditor - WYSIWYG editor based on CKEditor with completely rewritten UI.
  - megadraft - Rich Text editor built on top of draft.js.
  - react-ace - React Ace Component.
  - react-codemirror - Codemirror Component for React.js.
  - react-contenteditable - React component for a div with editable contents.
  - react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS.
  - react-medium-editor - React wrapper for medium-editor.
  - react-quill - A Quill component for React.
  - react-trumbowyg - React wrapper for Trumbowyg.
  - ritzy - Collaborative web-based rich text editor.
  - react-markdown-editor - A markdown editor using React/Reflux.
  - react-md-editor - React.js Markdown Editor Component.
  - 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 built for React.
  - react-images-uploader - React.js component for uploading images to the server.
  - react-image-crop - A responsive image cropping tool for React.
  - react-date-range - A React component for choosing dates and date ranges.
  - react-dates - An easily internationalizable, mobile-friendly datepicker library for the web.
  - 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 - React image crop.
  - react-upload-gallery - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
  - react-syntax-highlighter - Syntax highlighting component for react with prismjs or highlightjs ast using inline styles.
  - react-big-calendar - Gcal/outlook like calendar component.
  - formsy-material-ui - A Formsy compatibility wrapper for Material-UI form components.
  - sortablejs - A JavaScript library for reorderable drag-and-drop lists.
  - react-avatar-cropper - Aiming to be a complete solution for avatar cropping in react.
  - react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
  - react-triple-toggle - ⚛️ React multi toggle component.
  - react-dnd-touch-backend - Touch Backend for react-dnd.
  - 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.
- 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-list - A versatile infinite scroll React component.
- Loader
  - react-loader - React component that displays a spinner via spin.js until your component is loaded.
  - rc-progress - React Progress Bar.
  - react-block-ui - Easy way to block the user from interacting with your UI.
  - react-ladda - React wrapper for Ladda buttons.
  - 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-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
  - rc-menu - React Menu.
  - react-burger-menu - An off-canvas sidebar with effects and styles.
  - react-contextmenu - Context Menu implemented in React.
  - react-metismenu - A ready-to-use menu component for 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-blur - React component for blurred backgrounds.
  - 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-svg-buttons - Configurable animated SVG buttons for react.
  - 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-color-scroll - Change and blend new colors on the background as you scroll.
  - react-facebook - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
  - 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, toast messages, with promise support and inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_
  - react-notifications-component - [demo](https://teodosii.github.io/react-notifications-component/) - highly configurable notifications. _(Uses refs 🙁)_
  - react-notification-system - A complete and totally customizable component for notifications in React. _(Uses refs 🙁)_
  - 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. _([But no hooks yet](https://github.com/jossmac/react-toast-notifications/issues/20).)_
  - 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).
- 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 / Data Grid
  - gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  - griddle-react - Simple Grid Component written in React.
  - mui-datatables - Advanced and Pretty Data Tables where everything is customisable.
  - react-data-components - React components for sorting, filtering and pagination of data.
  - react-pivot - Data-grid component with pivot-table-like for data display, filtering, and exploration.
  - reactable - Fast, flexible, and simple data tables in React.
  - reactabular - Spectacular tables for React.
  - sematable - Client side sorting, pagination, and text filter for redux/react based apps.
  - shineout - [demo](https://shine.wiki/1.3.x/en/components/Table#heading-08-bigdata) - A comprehensive solution for complicated/big-data table.
  - ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
- 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
  - rc-tooltip - React 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
  - 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.
  - 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 - A configurable Mobile UI.
  - touchstonejs - Mobile App Framework powered by React.
  - reactionic - React Ionic.
- Responsive
  - atlaskit - Atlassian's official UI library. _(Please... no more Jira though 😉)_
  - ant-design - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language.
  - belle - Configurable React Components with great UX.
  - blueprint - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for the web.
  - carbon - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM. _(Wait, since when are IBM known for design?? 🎨)_
  - elemental - A flexible and beautiful UI framework for React.js.
  - 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. _(Nice... but surprisingly not as well-designed as I would have thought from Pinterest. 😬)_
  - pivotal-ui-react - React components based on a custom version of the Bootstrap library.
  - rctui - A collection of components for React.
  - react-foundation-apps - Foundation Apps components built with React.
  - react-uikit-components - React UIkit Components for the UIKit CSS framework.
  - 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.
  - 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.
  - OnsenUI - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app development framework.
  - office-ui-fabric-react - React components for building Microsoft web experiences. _(🤔 But I'm not sure I want a "MSFT experience?")_
  - react-foundation - Foundation as React components.
  - material-ui - React Components that Implement Google's Material Design. (But possibly [bloated](https://hackernoon.com/how-i-made-my-react-app-4-times-faster-7b929479cac4).)

Programming Languages

JavaScript 308 TypeScript 70 CoffeeScript 5 CSS 3 SCSS 1 Less 1 LiveScript 1 Rust 1 Ruby 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-react-components

UI Components

Form Components

Icons

Infinite Scroll

Loader

Map

Markdown Viewer

Menu

Miscellaneous

Notification

Overlay

Paginator

Photo / Image

Sticky

Table / Data Grid

Tabs

Time / Date / Age

Tooltip

Tree

UI Navigation

UI Frameworks

Component Collections

Mobile

Responsive