Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-react-components

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!
https://github.com/mohamed-yamani/awesome-react-components

Last synced: about 21 hours ago
JSON representation

  • UI Components

    • Editable data grid / spreadsheet

      • 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.
      • react-data-grid - Excel-like grid.
      • 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
      • jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

    • Table

      • ka-table - [demo](https://komarovalexander.github.io/ka-table/#/overview) - 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-table - [demo](https://react-table.tanstack.com/docs/examples/basic) - Hooks for building fast and extendable tables and datagrids
      • 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.
      • DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
      • KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
      • Elementz Table - [demo/docs](https://elementz.style/#!/Table) - A modern and easy-to-use table packed with all neccessary features, responsive, infinite scrolling & more. 🆕

    • 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.
      • react-list - A versatile infinite scroll React component.
      • react-window - [demo](https://react-window.now.sh/) - React components for efficiently rendering large lists and tabular data
      • af-virtual-scroll - [demo/docs](https://af-virtual-scroll.vercel.app/docs/why) - Render large scrollable lists and tables.

    • Overlay

      • reboron - A collection of dialog animations with React.js
      • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
      • react-modal - Accessible modal dialog component for React.
      • react-skylight - A react component for modals and dialogs.
      • reoverlay - [demo](https://hiradary.github.io/reoverlay/) - The missing solution for managing modals.
      • sweetalert2 - [demo/docs](https://sweetalert2.github.io/) - 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

      • 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-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.
      • react-toast-notifications - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system.
      • reapop - A React & Redux notifications system.
      • simple-react-notifications - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip).
      • react-hot-toast - [demo](https://react-hot-toast.com/) - Smoking 🔥hot🔥 Notifications for React. Lightweight, customizable and beautiful by default.

    • Tooltip

    • Menu

      • hamburger-react - [demo/docs](https://hamburger-react.netlify.app/) - 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](https://innfactory.github.io/react-planet/) - Create circular menus which looks like planets.

    • Sticky

    • Tabs

    • Loader

      • react-awesome-slider - [demo](https://caferati.me/demo/react-awesome-slider) - 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](https://skozer.github.io/react-instagram-zoom-slider/) - 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](https://keen-slider.io/examples/#examples) - Performant carousel/slider with native touch/swipe behavior.
      • react-image-magnify - [demo](https://ethanselzer.github.io/react-image-magnify/#/external) - Responsive React image carousel zoom component for touch and mouse. Designed for shopping site product detail
      • swiper - [demo](https://swiperjs.com/demos) - [docs](https://swiperjs.com/react) - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
      • @egjs/react-flicking - [npm](https://www.npmjs.com/package/@egjs/react-flicking) - [demo](https://naver.github.io/egjs-flicking/) - It's reliable, flexible and extendable carousel.

    • Buttons

      • react-awesome-button - [demo](https://caferati.me/demo/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions.
      • reactive-button - [demo](https://arifszn.github.io/reactive-button/docs/playground) - [docs](https://arifszn.github.io/reactive-button) - 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](https://merri.github.io/react-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs.

    • Chart

    • Tree

      • react-complex-tree - [demo](https://rct.lukasbach.com/) - [docs](https://rct.lukasbach.com/docs/getstarted) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
      • react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
      • react-treeview - Easy, light, flexible tree view made with React.

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

    • Audio / Video

    • Map

      • google-map-react - Universal google map react component, allows render react components on the google 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-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](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map.

    • Time / Date / Age

    • Photo / Image

      • lightGallery - [demo](https://www.lightgalleryjs.com/) - [docs](https://www.lightgalleryjs.com/docs/react/) - Full-featured lightbox gallery component.
      • react-compare-image - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider.
      • react-image-gallery - Responsive image gallery, carousel, image slider react component.
      • react-image-lightbox - React lightbox component.
      • 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-particle-image - [demo](https://malerba118.github.io/react-particle-image-demo/) - Render images as interactive particles.
      • react-imgix - Add fast, responsive images as an image, picture, or background!
      • react-image-lightbox - React lightbox 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.
      • 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.

    • Paginator

      • 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](https://stepper.tkwant.de/) - Responsive React Stepper.

    • Markdown Viewer

    • Canvas

      • 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](https://vinoth.info/react-sketch-canvas/?path=/story/*) 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

      • 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.
      • react-demo-tab - [demo](https://mkosir.github.io/react-demo-tab) - 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](<https://blog.fastcomments.com/(12-30-2019)-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA.
      • react-pdf-viewer - [docs](https://react-pdf-viewer.dev) - A React component to view a PDF document.
      • 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-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
      • react-resizable-and-movable - Resizable and movable component for React.
      • react-pdf - Display PDFs in your React app as easily as if they were images.
      • react-customizable-chat-bot - [Demo](https://chithakumar13.github.io/bot-example) - Build your own chatbot matching your brand needs in minutes.
      • react-resizable-box - Resizable component for React. #reactjs.
      • @restpace/schema-form - [Demo](https://restspace.io/react/schema-form/demo) - Easily build complex forms automatically from a JSON Schema.
      • react-searchbox-awesome - [demo](https://axmz.github.io/react-searchbox-awesome-page/) - Minimalistic searchbox.
      • react-apple-signin-auth -  Apple signin for React using the official Apple JS SDK.
      • 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-darkreader - 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.

    • Form Components

      • date-range-picker - [demo](https://almogtavor.github.io/date-range-picker/) - 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](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-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](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.
      • react-calendar - Ultimate calendar for your React app.
      • react-date-picker - A date picker for your React app.
      • react-credit-cards - Beautiful credit cards for your payment forms.
      • 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-autosuggest - WAI-ARIA compliant React autosuggest component.
      • react-typeahead - Pure react-based typeahead and typeahead-tokenizer.
      • @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-aria-menubutton - A fully accessible, easily themeable, React-powered menu button.
      • react-ios-switch - React switch component.
      • react-functional-select - [demo](https://based-ghost.github.io/react-functional-select/) - Micro-sized & micro-optimized select component for React.js.
      • react-toggle - An elegant, accessible toggle component for React. Also a glorified checkbox.
      • react-select-box - An accessible select box component for React.
      • react-select - A Select control built with and for React JS.
      • react-slider - Slider component for React.
      • react-column-select - A column select component built 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.
      • react-input-color - React input color component with hsv color picker.
      • react-radio-group - Better radio buttons.
      • 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.
      • @pathofdev/react-tag-input - [demo & docs](https://pathof.dev/projects/react-tag-input) - Minimal tagging component with editable tags
      • 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.
      • 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 - &lt;textarea /&gt; component for React which grows with content.
      • 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-star-rating - A simple star rating component built with React.
      • 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.
      • 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.
      • draft-js - A React framework for building text editors.
      • 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-monacoeditor - Monaco Editor component for React.
      • 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 - Markdown editor.
      • 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-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.
      • 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.
      • interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
      • 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.
      • 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-triple-toggle - ⚛️ React multi toggle component.
      • 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.
      • formsy-material-ui - A Formsy compatibility wrapper for Material-UI form components.
      • react-avatar-generator - Generate fun kaleidoscope for user avatars.

  • UI Layout

    • Form Components

      • 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](https://1czo5.csb.app/) - [docs](https://paol-imi.github.io/muuri-react) - 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](https://www.allaneagle.com/react-spaces/demo/) - 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](https://umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration

  • UI Animation

    • Form Components

      • react-tweenful - [demo](https://teodosii.github.io/react-tweenful/) - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.
      • data-driven-motion - Easily animate your data.
      • 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-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.
      • 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 -.
      • velocity-react - Velocity.js wrapper.
      • auto-size-transition - A component that scale dynamically according to the internal children size
      • react-particles-bg - Particles backgrounds.
      • gooey-react - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs.
      • react-voodoo - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc
      • react-tsparticles - A lightweight component to easily create interactive particles animations

    • Parallax

      • react-parallax-component - Easiest way to add scroll parallax effect on the component.
      • react-parallax-tilt - [demo](https://mkosir.github.io/react-parallax-tilt) - Easily apply parallax tilt hover effect on components.

  • UI Frameworks

    • Responsive

      • zeit-ui-react - Modern and minimalist React UI library.
      • ant-design - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available.
      • carbon - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM.
      • cdbreact - [demo](https://www.devwares.com/product/contrast) - [docs](https://www.devwares.com/docs/contrast/react/index) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
      • chakra-ui - [demo/docs](https://chakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications.
      • CoreUI for React - [demo/docs](https://coreui.io/react) - Open Source UI components library.
      • 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.
      • office-ui-fabric-react - React components for building Microsoft web experiences.
      • orbit-components - Components for building travel oriented projects.
      • 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 - Foundation as React components.
      • reakit - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps
      • rebass - Configurable React Stateless Functional UI Components.
      • 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.
      • ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI
      • Mantine - [demo/docs](https://mantine.dev/) - A fully featured library with 100+ hooks and components with native dark theme support
      • semi-design - [demo/docs](https://semi.design/) - A modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps & SaaS products.
      • Material-UI - Full suite of components. Build your own design system, or start with Material Design.
      • 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
      • atlaskit - Atlassian's official UI library, with components from _badge_ to _tree table_.
      • orbit-components - Components for building travel oriented projects.
      • fluent-ui - [demo/docs](https://fluent-ui.com/) - 🌈 React components that inspired by Microsoft's Fluent Design System.

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

    • 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.
      • aframe-react - Build virtual reality experiences with A-Frame and React.
      • react-admin - Build admin user experiences on top of REST and GraphQL services.
      • react-desktop - React UI Components for macOS Sierra and Windows 10.
      • refine - [demo](https://example.refine.dev) - [docs](https://refine.dev/docs) - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
      • matrix-card - [demo](https://mehmetkaplan.github.io/matrix-card/) - Simplest possible component to generate matrix rain style cards.
      • rsuite - [demo/docs](https://rsuitejs.com/) - Suite of components for "enterprise system products".
      • dataminr-react-components - Collection of reusable React Components and utility functions.
      • shards-react - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium 💰

  • UI Utilities

  • Code Design

    • Data Store

      • alt - Isomorphic flux implementation.
      • baobab-react - React integration for Baobab.
      • cerebral - A state controller with its own debugger.
      • effector-react - React bindings for effector, an effective multi-store state manager.
      • fluorine-lib - Reactive state and side effect management for React using a single stream of actions.
      • fluxible - A pluggable container for universal flux applications.
      • fluxxor - Flux architecture tools for React.
      • kea - High level architecture for React apps.
      • mobx-react - React bindings for MobX. Create fully reactive components.
      • react-3ducks - [demo](https://stackblitz.com/github/smakazmi/react-3ducks/tree/master/examples/todos) - Simple state management solution for React.
      • react-controllables - Easily create controllable components.
      • react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
      • react-redux - Official React bindings for Redux.
      • redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification.
      • redux-batched-subscribe - Store enhancer for which allows batching subscribe notifications.
      • redux - Predictable state container for JavaScript apps.
      • reflux - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
      • reselect - Selector library for Redux.
      • resourcerer - Declarative data-fetching framework for REST APIs
      • shasta - Dead simple + opinionated toolkit for building redux/react applications.
      • teaful - Tiny, easy and powerful React state management
      • react-redux-provide - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
      • zustand - [docs](https://github.com/pmndrs/zustand) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.

    • Form Logic

      • data-driven-forms - A declarative way for building forms with all the functionality.
      • formcat - A simple and easy way to control forms in React using the React Context API
      • formsy-react - A form input builder and validator for React JS.
      • plexus-form - A dynamic form component for react using JSON-Schema.
      • react-jsonschema-form - A React component for building Web forms from JSONSchema.
      • react-validation-mixin - Simple validation mixin (HoC) for React.
      • react-final-form - Subscription-based form state management
      • react-formawesome - Complex library for creating awesome forms.
      • surveyjs - The advanced Survey and Form library
      • Formily - High performance, extensible, and Typescript friendly
      • formik - Build forms without tears and supports Validation in ease.
      • react-hook-form - React hooks for form validation without the hassle.

    • Router

      • react-breadcrumbs - Automatic breadcrumbs for React-Router.
      • react-router-component - Declarative router component for React.
      • react-router-scroll - React Router scroll management.
      • react-router - A complete routing library for React.
      • redux-first-history - Redux First History - Redux history binding support react-router - @reach/router - wouter
      • redux-router - Redux bindings for React Router &ndash; keep your router state inside your Redux store.
      • universal-router - A simple middleware-style router for isomorphic JavaScript web apps.
      • wouter - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.

    • Props from server

      • react-async - Asynchronously fetch data for React components.
      • react-refetch - A simple, declarative, and composable way to fetch data for React components.
      • react-resolver - Async rendering &amp; data-fetching for universal React applications.
      • react-router-relay - Relay integration for React Router.
      • redial - Universal data fetching and route lifecycle management for React etc.
      • redux-async-connect - Request async data, store in redux state, and connect to your component.
      • redux-connect - Provides decorator for resolving async props in react-router.
      • axios-react - HTTP client component for React.

    • Communication with server

      • adrenaline - Simple Relay alternative.
      • apollo-client - A simple caching client for any GraphQL server and UI framework.
      • react-relay - Relay is a JavaScript framework for building data-driven React applications.

    • CSS / Style

      • aesthetic - A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.
      • aphrodite - It&#39;s inline styles, but they work!.
      • inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
      • radium - A set of tools to manage inline styles on React elements.
      • react-container-query - Modular responsive component.
      • react-css-modules - Seamless mapping of class names to CSS modules inside of React components.
      • react-responsive - Media queries in react for responsive design.
      • reactponsive - Responsive components and hooks.
      • paperclip - [docs](https://paperclip.dev/docs/) - Build UI primitivites with plain HTML & CSS.
      • styled-components - Visual primitives for the component age.

    • HTML Template

    • Isomorphic Apps

    • Boilerplate

    • Miscellaneous

      • react-inlinesvg - An SVG loader component for ReactJS.
      • react-godfather - A new way to write Functional Components, without Hooks.
      • redux-auth-patch - Complete token authentication system for react + redux that supports isomorphic rendering.
      • tcomb-react - Alternative syntax for PropTypes.
      • react-universal-hooks - :tada: support react hooks everywhere (Functional or Class Component).
      • react-find - ⚛️ Elegant, accessible search component for React.
      • redux-search - Redux bindings for client-side search.

  • Utilities

    • Miscellaneous

    • i18n

      • react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
      • react-intl - Internationalize React apps.
      • react-localized - Internationalization for React components based on `gettext` format.
      • react-intl-universal - [demo](https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html) Internationalize React apps. Not only for React.Component but also for Vanilla JS.
      • @tolgee/react - [docs](https://tolgee.io/docs/web/using_with_react/installation) – Web-based localization tool enabling users to translate directly in the React app they develop
      • react-translate-maker - Universal internationalization (i18n) open source library for React.
      • js-lingui - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript.

    • Framework bindings / integrations

    • Integrations with Third Party Services

  • Performance

    • UI

    • App Size

    • Server-Side Rendering

      • iSSR - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
      • react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

  • Dev Tools

    • Test

      • carte-blanche - An isolated development space with integrated fuzz testing for your components.
      • enzyme - JavaScript Testing utilities for React.
      • jest-cli - Painless JavaScript Testing.
      • react-unit - Lightweight unit test library for ReactJS.
      • redux-test-recorder - A redux middleware to automatically generate tests for reducers through ui interaction.
      • rut - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers.
      • unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
      • chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme.

    • Redux

    • Inspect

    • Miscellaneous

      • component-controls - [demo](https://component-controls.com) - [docs](https://component-controls.com/tutorial) - A next-generation tool to create blazing-fast documentation sites.
      • react-heatpack - A &#39;heatpack&#39; command for quick React development with webpack hot reloading.
      • SimpleLocalize - Open source CLI tool for finding i18n keys in React projects.
      • Plasmic - Powerful design tool for building your React components visually.
      • cosmos-js - DX tool for designing truly encapsulated React components.
      • react-demo-tab-cli - CLI tool for creating demos of react components.
      • react-styleguidist - React style guide generator.
      • standard-react - JavaScript Standard Style Guide.

  • Miscellaneous

    • Miscellaneous

      • html-to-react-components - Extract annotated portions of HTML into React components as separate modules.
      • htmltojsx - Automatically AJAXify plain HTML with the power of React. It&#39;s magic!.
      • jsonx - React JSON Syntax.
      • mozaik - Moza&iuml;k is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
      • react-blessed - A react renderer for blessed.
      • jsondiffpatch-react - JSON diffing.
      • DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.

    • Static Website Generator

      • gatsby - Transform plain text into dynamic blogs and websites using React.js.

  • Cloud Solutions

  • Uncategorized

    • Uncategorized

      • @petebray
      • @brillout - api) &mdash; create an RPC-like API as an alternative to REST and GraphQL.
Programming Languages
JavaScript 296 TypeScript 179 HTML 2 MDX 2 CSS 2 SCSS 2 Elm 1 Java 1 CoffeeScript 1 Ruby 1
Categories
UI Components 262 Code Design 101 UI Frameworks 42 Utilities 34 UI Utilities 26 Dev Tools 26 UI Animation 22 Performance 14 UI Layout 12 Miscellaneous 8 Cloud Solutions 2 Uncategorized 2
Sub Categories
Form Components 132 Miscellaneous 54 Responsive 31 Data Store 23 Chart 22 Boilerplate 22 Framework bindings / integrations 15 Form Logic 12 Carousel 10 Photo / Image 10 Table 10 CSS / Style 10 UI 10 Device Input 9 Component Collections 9 Reporter 9 Test 8 Props from server 8 Router 8 Notification 8 Map 7 i18n 7 Integrations with Third Party Services 7 Redux 7 Overlay 7 Audio / Video 6 Loader 6 Isomorphic Apps 6 Editable data grid / spreadsheet 6 Paginator 4 Icons 4 Menu 4 Canvas 4 Meta Tags 4 Infinite Scroll 4 Custom Scrollbar 3 Time / Date / Age 3 Communication with server 3 Inspect 3 Sticky 3 Tree 3 Collapse 3 Parallax 2 Portal 2 HTML Template 2 Mobile 2 Tabs 2 Test User Behavior 2 Buttons 2 UI Navigation 2 Databases 2 Server-Side Rendering 2 App Size 2 Uncategorized 2 Markdown Viewer 1 Tooltip 1 Static Website Generator 1
Keywords
react 290 javascript 73 reactjs 62 react-component 41 typescript 40 react-components 40 component 25 redux 20 ui 16 css 13 editor 12 grid 12 components 12 react-hooks 12 react-native 11 svg 11 ui-components 11 table 11 webpack 11 drag-and-drop 11 hooks 10 design-system 10 web 9 babel 9 vue 9 chart 9 animation 8 boilerplate 8 forms 8 ssr 8 styled-components 7 i18n 7 performance 7 carousel 7 nodejs 7 bootstrap 7 form 7 accessible 7 mobile 7 notifications 7 modal 6 router 6 graphql 6 charts 6 slider 6 toast 6 eslint 6 state-management 6 visualization 6 autocomplete 6