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: 4 days ago
JSON representation

UI Components
- Paginator
  - paginated - React render props & custom hook to build pagination.
  - react-steps - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper.
- Photo / Image
  - lightGallery - [demo](https://www.lightgalleryjs.com/) - [docs](https://www.lightgalleryjs.com/docs/react/) - Full-featured lightbox gallery component.
  - 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-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
  - 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. 🆕
  - 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
  - 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.
  - KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
  - react-table - [demo](https://react-table.tanstack.com/docs/examples/basic) - 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'.
  - react-google-flight-datepicker - Google flight date picker implemented in ReactJS.
- Tooltip
  - react-tooltip - React tooltip component.
- 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-treeview - Easy, light, flexible tree view made with React.
  - react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
- 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.
  - 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".
  - aframe-react - Build virtual reality experiences with A-Frame and React.
  - 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.
  - 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.
  - 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.
  - 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.
  - 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.
  - 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
  - office-ui-fabric-react - React components for building Microsoft web experiences.
  - react-foundation - Foundation as React components.
  - base web - Base Web is a foundation for initiating, evolving, and unifying web products.
  - zeit-ui-react - Modern and minimalist React UI library.
  - fluent-ui - [demo/docs](https://fluent-ui.com/) - 🌈 React components that inspired by Microsoft's Fluent Design System.
  - orbit-components - Components for building travel oriented projects.
  - Material-UI - Full suite of components. Build your own design system, or start with Material Design.
  - rebass - Configurable React Stateless Functional UI Components.
  - reakit - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps
  - Autocomplete - Accessible autocomplete, combobox, multiselect
  - Icons - 1,000+ SVG material icons.
  - Modal - Accessible modal dialog component.
  - Slider - Accessible slider component.
  - Table - table with sorting, selecting, pagination, virtualized.
UI Layout
- Form Components
  - autoresponsive-react - Auto responsive grid layout library.
  - 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-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
  - react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
  - golden-layout - A multi-screen JavaScript Layout manager.
  - hedron - A no-frills flexbox grid system, powered by styled-components.
UI Utilities
- Device Input
  - react-key-handler - React component to handle keyboard events.
  - react-keydown - Lightweight keydown wrapper for React components.
  - react-shortcuts - Manage keyboard shortcuts from one place.
  - useKeyCapture - A custom hook to ease the key-press listeners of a target/global.
  - react-scroll-components - A set of components that react to page scrolling.
  - react-swipe - Swipe.js as a React component.
  - react-aim - Determine the cursor aim for triggering mouse events.
  - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element.
- Meta Tags
  - react-document-meta - HTML meta tags for React-based apps.
  - react-document-title - Declarative, nested, stateful, isomorphic document.title for React.
  - react-helmet-async - Thread-safe Helmet for React 16+ and friends
  - react-helmet - A document head manager for React.
- Portal
  - react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.
  - react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React.
- Reporter
  - react-intersection-observer - React implementation of the Intersection Observer API.
  - react-visibility-sensor - Sensor component.
  - react-component-queries - Provide props to your Components based on their Width and/or Height.
  - react-container-dimensions - Wrapper component that detects element resize.
  - react-dimensions - React higher-order component to get dimensions of container.
  - react-height - Component-wrapper to determine and report children elements height.
  - react-measure - Compute measurements of a React component.
  - react-sizeme - Make your React Components aware of their width and height.
  - react-waypoint - A React component to execute a function whenever you scroll to an element.
- Test User Behavior
  - react-ab - Simple declarative and universal A/B testing component for React.
  - react-experiments - React components for implementing UI experiments.
Uncategorized
- Uncategorized
  - @petebray
  - @brillout - api) — create an RPC-like API as an alternative to REST and GraphQL.
  - @brillout - api) — create an RPC-like API as an alternative to REST and GraphQL.
Utilities
- Framework bindings / integrations
  - backbone-react-component - A bit of nifty glue that automatically plugs your Backbone models.
  - react-backbone - Backbone-aware mixins for react and a whole lot more.
  - react-d3-library - Open source library for using D3 in React.
  - react-famous - React bridge to Famo.us.
  - react-localstorage - Simple componentized localstorage implementation for Facebook's React.
  - react-lottie-player - [demo](https://mifi.github.io/react-lottie-player/) - Declarative lottie animation player.
  - react-on-rails - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
  - react-threejs - Simplest bindings between React & Three.js
  - elm-react-component - A React component which wraps an Elm module to be used in a React application.
  - react-three-renderer - Render into a three.js canvas using React.
  - reactive-elements - Allows to use React.js component as HTML element (web component).
  - gl-react - OpenGL / WebGL bindings for React to implement complex effects over images and content.
  - react-elm-components - Write React components in Elm.
  - react-unity-webgl - Unity intergration with two-way communication using a built-in Event System.
  - reactfire - ReactJS mixin for easy Firebase integration.
- i18n
  - @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-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
  - 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.
  - js-lingui - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript.
  - react-translate-maker - Universal internationalization (i18n) open source library for React.
  - react-intl - Internationalize React apps.
- Integrations with Third Party Services
  - redux-segment - Segment.io analytics integration for redux.
  - react-ga - React Google Analytics Module.
  - react-google-analytics - Google analytics component.
  - react-google-autocomplete - Google Places API components and hooks.
  - react-recaptcha - A react.js reCAPTCHA for Google.
  - react-stripe-checkout - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
  - react-slack-notification - Send messages and error logs to a Slack channel directly.
- Miscellaneous
  - qrcode.react - A <QRCode/> component for use with React.
  - react-children-utilities - Extended utils for React.Children.
  - react-media - A CSS media query component for React.
  - react-middle-ellipsis - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end.
  - react-translate-component - Multi-lingual/localized text content.

Programming Languages

JavaScript 279 TypeScript 159 HTML 2 SCSS 2 CSS 2 Java 1 CoffeeScript 1 Rust 1 Ruby 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-react-components

UI Components

Paginator

Photo / Image

Sticky

Table

Tabs

Time / Date / Age

Tooltip

Tree

UI Navigation

UI Frameworks

Component Collections

Mobile

Responsive

UI Layout

Form Components

UI Utilities

Device Input

Meta Tags

Portal

Reporter

Test User Behavior

Uncategorized

Uncategorized

Utilities

Framework bindings / integrations

i18n

Integrations with Third Party Services

Miscellaneous