awesome-react-components

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

Last synced: 7 days ago
JSON representation

UI Components
- Overlay
  - 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
  - @paratco/async-modal - Simple async modal handler for React.
- 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.
- 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.
  - yet-another-react-lightbox - [demo](https://yet-another-react-lightbox.com/examples) - [docs](https://yet-another-react-lightbox.com/documentation) - React lightbox component.
  - react-intense - A React component for viewing large images up close.
  - react-photo-album - [demo](https://react-photo-album.com/examples) - [docs](https://react-photo-album.com/documentation) - 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!
  - @frameright/react-image-display-control - Define zoom regions for smart responsive images.
  - zoom-image - [demo](https://willnguyen1312.github.io/zoom-image/examples/react.html) - [docs](https://willnguyen1312.github.io/zoom-image) - A little yet powerful framework agnostic library to zoom image on the web
  - react-compare-image - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider.
  - react-infinite-gallery - scroll image gallery component for React apps.
- Screenshot
  - html2canvas - Take screenshots of any part of your web page using Javascript.
- Sticky
  - react-headroom - Hide your header until you need it.
  - react-stickynode - A performant and comprehensive React sticky.
- Table
  - DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
  - Smart React Grid - Fast and feature-complete data grid with Material Design.
  - KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
  - AG Grid - The Best JavaScript Grid in the World
  - ka-table - [demo](https://komarovalexander.github.io/ka-table/#/overview) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
  - mantine-datatable - [demo/docs](https://icflorescu.github.io/mantine-datatable/) - Lightweight table component for Mantine UI applications, with lots of features
  - 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-library - [demo](https://react-table-library.com/) - React Table Library -- an almost headless table library -- for building better tables.
  - 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.
  - Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
  - KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
  - TanStack Table - [demo](https://tanstack.com/table/v8/docs/examples/react/basic) - Headless UI for building powerful tables & datagrids
  - simple-table - [demo](https://www.simple-table.com/examples) - [docs](https://www.simple-table.com/docs) - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.
- 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-arborist - [demo](https://react-arborist.netlify.app/) - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
  - 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.
  - he-tree-react - [demo](https://he-tree-react.phphe.com/v1/examples) - [docs](https://he-tree-react.phphe.com/) - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.
  - json-edit-react - [demo](https://carlosnz.github.io/json-edit-react/) - Highly configurable JSON/Object tree viewer and editor
- 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.
  - 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".
  - lens-ui - [docs](https://github.com/luciancaetano/lens-ui/blob/main/docs/introduction.md) - A Suit of components focused on simplicity.
  - 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.
  - Tailwindadmin - [docs](https://tailwind-admin.com/components) - A collection of Ready-made ShadCN UI components you can directly plug into your React/Next.js projects.
- Mobile
  - Ionic React - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
  - 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
  - AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
  - atlaskit - Atlassian's official UI library, with components from _badge_ to _tree table_.
  - base web - Base Web is a foundation for initiating, evolving, and unifying web products.
  - radix-ui - Unstyled, accessible components for building high‑quality design systems and web apps.
  - Autocomplete - Accessible autocomplete, combobox, multiselect
  - Material Icons - 1,000+ SVG material icons.
  - Modal - Accessible modal dialog component.
  - Slider - Accessible slider component.
  - Table - table with sorting, selecting, pagination, virtualized.
  - Tree View - Accessible tree view component for React.
  - 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.
  - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI
  - 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.
  - fluentui - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
  - geist-ui - Modern and minimalist React UI library.
  - gestalt - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language.
  - grommet - The most advanced UX framework for enterprise applications.
  - Mantine - [demo/docs](https://mantine.dev/) - A fully featured library with 100+ hooks and components with native dark theme support
  - orbit - Components for building travel oriented projects.
  - flowbite-react - Open-source UI component library based on React, Tailwind CSS, and Flowbite.
  - 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
  - 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.
  - semi-design - [demo/docs](https://semi.design/) - A modern, comprehensive, flexible design system.
  - shadcn/ui - [demo](https://ui.shadcn.com/examples/mail) - [docs](https://ui.shadcn.com/docs) - Beautifully designed components that you can copy and paste into your apps.
  - 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.
  - 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
  - base web - Base Web is a foundation for initiating, evolving, and unifying web products.
  - kokonut-ui - Free Modern and Customizable UI components.
  - Tremor - [demo](https://tremor.so/charts) - [docs](https://tremor.so/docs/getting-started/installation) - Open-source components to build charts and dashboards.
  - untitled-ui-react - [demo](https://www.untitledui.com/react/) - Beautifully crafted collection of components built with React Aria and Tailwind CSS.
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
  - golden-layout - A multi-screen JavaScript Layout manager.
  - hedron - A no-frills flexbox grid system, powered by styled-components.
  - react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
  - react-layman - [demo](https://jeshwin.github.io/react-layman/) - Dynamic tiling layout manager with tabs
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-keyboard-navigator - A suite of React components and hook for selecting sibling components through the keyboard.
  - react-scroll-components - A set of components that react to page scrolling.
  - react-swipe - Swipe.js as a React component.
  - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element.
- Meta Tags
  - react-helmet-async - Thread-safe Helmet for React 16+ and friends
  - react-helmet - A document head manager for React.
- Portal
  - react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React.
  - 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-experiments - React components for implementing UI experiments.
Uncategorized
- Uncategorized
  - @petebray
  - @brillout - based React framework that is flexible, lean, community-driven and dependable.
  - @brillout - based React framework that is flexible, lean, community-driven and dependable.
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-translate-maker - Universal internationalization (i18n) open source library for React.
  - 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.
  - react-firebase-hooks - Hooks to integrate firebase in your application.
- Miscellaneous
  - qrcode.react - A <QRCode/> component for use with React.
  - `<qr-code>` - dependencies, customizable, animate-able, SVG-based `<qr-code>` element.
  - 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 229 TypeScript 219 HTML 3 SCSS 2 CSS 2 Java 1 CoffeeScript 1 MDX 1 Rust 1 Ruby 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-react-components

UI Components

Overlay

Paginator

Photo / Image

Screenshot

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