awesome-react-components

🚀 Curated Collection of Exceptional React Components & Libraries
https://github.com/saidee-hasan/awesome-react-components

Last synced: 5 days ago
JSON representation

UI Components
- 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
  - 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.
  - DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.
  - Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
  - AG Grid - The Best JavaScript Grid in the World
  - 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
- 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.
  - react-arborist - [demo](https://react-arborist.netlify.app/) - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
- 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.
- 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
  - AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
  - ant-design - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available.
  - atlaskit - Atlassian's official UI library, with components from _badge_ to _tree table_.
  - 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.
  - radix-ui - Unstyled, accessible components for building high‑quality design systems and web apps.
  - 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.
  - 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.
  - 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.
  - Tree View - Accessible tree view component for React.
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-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-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.
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
  - 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.
  - @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
  - 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
  - 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.
  - redux-segment - Segment.io analytics integration for redux.
  - 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 226 TypeScript 210 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

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