🚀 Absolutely Awesome React Components & Libraries

Original post: react-component-library · GitHub Topics

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!

Look for a ðŸš€ for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

Maintainers:

Contents

Contributing

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

  • fortune-sheet – An online spreedsheet component that provides out-of-the-box features just like Excel.
  • 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.
  • MUI X Data grid – demo/docs – Fast and customizable data grid with advanced features for power users and complex use cases.
  • react-data-grid – Excel-like grid.
  • revo-grid – demo/docs – Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid – demo/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 – Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
  • material-table – demo/docs – 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 – accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
  • TanStack Table – demo – Headless UI for building powerful tables & datagrids
  • react-table-library – demo – React Table Library — an almost headless table library — for building better tables.
  • rsuite-table – demo/docs – 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.
  • 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.
  • 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

Infinite Scroll

  • @egjs/react-infinitegrid – npm – demo – A module used to arrange card elements including content infinitely according to various layout types.
  • react-lazyload – Lazyload your Component, Image or anything else where the performance matters.
  • react-list – A versatile infinite scroll React component.
  • af-virtual-scroll – demo/docs – Render large scrollable lists and tables.
  • react-window – demo – React components for efficiently rendering large lists and tabular data
  • virtua – demo – Simple, fast, small and flexible virtual scroller.

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  • react-aria-modal – A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-modal – Accessible modal dialog component for React.
  • reoverlay – demo – The missing solution for managing modals.
  • sweetalert2 – demo/docs – 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

Toaster / snackbar — Notify the user with a modeless temporary little popup

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

Carousel

Buttons

Collapse

Chart

Display data in charts / graphs / diagrams

Command palette

  • kbar – demo – Fast, portable, and extensible cmd+k interface.

Tree

Display a tree data structure

  • react-arborist – demo – A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
  • react-complex-tree – demo – docs – Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
  • react-treeview – Easy, light, flexible tree view made with React.

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

  • react-dailymotion – Dailymotion player component for React.
  • react-player – A react component for playing a variety of URLs, including YouTube.
  • react-soundplayer – Create custom SoundCloud players with React.
  • react-youtube – React.js powered YouTube player component.
  • video-react – A web video player built for the HTML5 world using React library.
  • material-ui-audio-player – Audio player for material ui design.
  • react-vision-camera – Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
  • react-barcode-qrcode-scanner – Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.

Map

Time / Date / Age

Display time / date / age

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

  • 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.
  • tabler-icons-react – A set of over 450 free MIT-licensed high-quality SVG icons.
  • Lucide – Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdow source

Canvas

Sketch input using Canvas or SVG

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

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Emoji picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

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

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

Autosize Input / Textarea

Star Rating

Drag and Drop

  • 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.
  • neodrag – Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.

Sortable List

Let the user define an order on a list

  • react-anything-sortable – Sort any children with touch support and IE8 compatibility.
  • sortablejs – Lists reorderable by drag-and-drop, within and among lists.

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

  • @anatoliygatt/numeric-stepper – demo – A fully themeable and accessible numeric stepper component.
  • interweave – React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  • react-designer – Easy to configure, lightweight, editable vector graphics in your react components.
  • react-upload-gallery – React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

UI Layout

Back to top ⬆️

Components to layout the app’s UI

  • 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 – docs – 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 – 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 – Build responsive layouts using styled schematics without an overhead of any theme configuration

UI Animation

Back to top ⬆️

Animate transitions

Parallax

UI Frameworks

Back to top ⬆️

Responsive

Set of components + responsive layout system

  • AgnosticUI – Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
  • ant-design – demo/docs – A UI Design Language from China. Individual components available.
  • 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.
  • carbon – demo/docs – A design system built by IBM.
  • cdbreact – demo – docs – Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
  • chakra-ui – demo/docs – Simple, Modular & Accessible UI Components for your React Applications.
  • ChatUI – demo/docs – The UI design language and React library for Conversational UI
  • CoreUI for React – demo/docs – Open Source UI components library.
  • evergreen – demo/docs – 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 – A set of components that supports Pinterest’s design language.
  • grommet – The most advanced UX framework for enterprise applications.
  • Mantine – demo/docs – 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 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 – A modern, comprehensive, flexible design system.
  • shineout – demo – Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

  • 🚀 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.
    • Tree View – Accessible tree view component for React.
  • 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

Mobile

  • antd-mobile – Configurable Mobile UI from China.
  • Ionic React – Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
  • OnsenUI – demo/docs – Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Component Collections

  • blueprint – demo – docs – UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  • dataminr-react-components – Collection of reusable React Components and utility functions.
  • shards-react – docs/demo – A beautiful and modern React design system. Freemium.
  • aframe-react – Build virtual reality experiences with A-Frame and React.
  • react-admin – Build admin user experiences on top of REST and GraphQL services.
  • refine – demo – docs – Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
  • matrix-card – demo – Simplest possible component to generate matrix rain style cards.
  • rsuite – demo/docs – Suite of components for “enterprise system products”.
  • lens-ui – docs – A Suit of components focused on simplicity.

UI Utilities

Back to top ⬆️

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

  • react-hotkeys – Declarative hotkey and focus area management for React.
  • 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.

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Set meta tags, <title>, children of

Portal

Render an element at an arbitrary DOM node

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

Test User Behavior

A/B tests, experiments, …

Code Design

Back to top ⬆️

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

  • 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.
  • fluxible – A pluggable container for universal flux applications.
  • kea – High level architecture for React apps.
  • react-3ducks – demo – Simple state management solution for React.
  • 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 – Predictable state container for JavaScript apps.
  • reselect – Selector library for Redux.
  • resourcerer – Declarative data-fetching framework for REST APIs
  • synergies – docs A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.
  • zustand – docs – A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
  • teaful – Tiny, easy and powerful React state management

Form Logic

  • data-driven-forms – A declarative way for building forms with all the functionality.
  • formik – Build forms without tears and supports Validation in ease.
  • formsy-react – A form input builder and validator for React JS.
  • Phormal – Docs & Demos – Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.
  • react-hook-form – React hooks for form validation without the hassle.
  • react-jsonschema-form – A React component for building Web forms from JSONSchema.
  • react-client-validation – Simple and super lightweight validation 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

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

Component properties asynchronously fetched over the network

  • react-refetch – A simple, declarative, and composable way to fetch data for React components.
  • redux-connect – Provides decorator for resolving async props in react-router.
  • axios-react – HTTP client component for React.

Communication with server

  • 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.
  • query – docs Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

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’s inline styles, but they work!.
  • inline-style-prefixer – Run-time Autoprefixer for Inline Style Objects.
  • react-container-query – Modular responsive component.
  • react-responsive – Media queries in react for responsive design.
  • reactponsive – Responsive components and hooks.
  • styled-components – Visual primitives for the component age.
  • stitches – CSS-in-JS with near-zero runtime, SSR, multi-variant support.

HTML Template

Isomorphic Apps

  • hypernova – A service for server-side rendering your JavaScript views.
  • isomorphic-style-loader – Isomorphic CSS style loader for Webpack.
  • react-server – React framework with server render for blazing fast page load.
  • rill – Universal web application framework.
  • webpack-isomorphic-tools – Server-side rendering for your Webpack-built applications (e.g. React).

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

  • create-react-app – Create React apps with no build configuration.
  • crisp-react – Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
  • cra-template-redux-auth-starter – A Redux auth starter boilerplate for CRA.
  • electron-react-boilerplate – Live editing development on desktop app.
  • elegant – docs – demo – A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.
  • generator-starhackit – Full-stack starter kit.
  • nwb – CLI tool and devDependency for React apps & components and npm modules.
  • nx – Next generation build system with first class monorepo support and powerful integrations.
  • PBandJ – Zero-Config Reusable Component Framework.
  • react-hot-boilerplate – Minimal live-editing boilerplate for your next ReactJS project.
  • rockpack – Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.
  • create-react-dependency – Create react dependencies with no build configuration.
  • phoenix – A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
  • react-enterprise-starter-kit – Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.

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.
  • redux-search – Redux bindings for client-side search.
  • tcomb-react – Alternative syntax for PropTypes.
  • react-universal-hooks – ðŸŽ‰ support react hooks everywhere (Functional or Class Component).

Utilities

Back to top ⬆️

i18n

Internationalization / L10n / localization / translation

  • 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-translate-maker – Universal internationalization (i18n) open source library for React.
  • react-intl-universal – demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
  • @tolgee/react – docs â€“ Web-based localization tool enabling users to translate directly in the React app they develop
  • js-lingui – docs â€“ A readable, automated, and optimized (5 kb) internationalization for JavaScript.

Framework bindings / integrations

Integrations with Third Party Services

Performance

Back to top ⬆️

UI

Inspect

Lazy Load

  • react-infinite-grid – A React component which renders a grid of elements.
  • react-infinite – A browser-ready efficient scrolling container based on UITableView.
  • react-lazy-load – React component that renders children elements when they enter the viewport.
  • react-lazyload – Lazyload your Component, Image or anything matters the performance.
  • react-virtualized – React components for efficiently rendering large lists and tabular data.

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

Back to top ⬆️

Test

  • chai-enzyme – Chai.js assertions and convenience functions for testing React Components with enzyme.
  • 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.
  • playwright enables reliable end-to-end testing for modern web apps.

Redux

Inspect

  • fluxguard – PROD change monitoring that highlights all DOM + design changes.
  • react-inspector – Power of Browser DevTools inspectors right inside your React app.
  • react-json-inspector – React JSON inspector component.
  • reactotron – A CLI and OS X app for inspecting your React JS and React Native apps.

Miscellaneous

Miscellaneous

Back to top ⬆️

  • DataFormsJS JSX Loader – Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
  • 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’s magic!.
  • jsonx – React JSON Syntax.
  • mozaik – Mozaï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.

Static Website Generator

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

Cloud Solutions

Back to top ⬆️

Databases

Leave a Reply 0

Your email address will not be published. Required fields are marked *