🚀 Absolutely Awesome React Components & Libraries
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:
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.
Table of Contents
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.
-
mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features
-
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
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
-
puck - demo - The self-hosted visual editor for React
-
react-advanced-news-ticker - demo - A flexible and animated vertical news ticker component
-
react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars.
-
react-awesome-query-builder - demo - Visual query builder from form fields, with SQL, MongoDB and JSON export
-
react-blur - React component for blurred backgrounds.
-
react-demo-tab - demo - 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 - FastComments component for embedding a live comment thread on a page or SPA.
-
react-pdf-viewer - docs - A React component to view a PDF document.
-
react-simple-chatbot - demo - 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-mouse-select - Demo A component that allows selecting DOM elements by moving the mouse
-
react-resizable-and-movable - Resizable and movable component for React.
-
react-resizable-box - Resizable component for React. #reactjs.
-
react-searchbox-awesome - demo - Minimalistic searchbox.
-
react-split-pane - React split-pane component.
-
react-swipe-to-delete-ios - demo - To delete an item in a list the same way iOS does.
-
react-swipeable-list - demo - Configurable component to render list with swipeable items.
-
typography - A powerful toolkit for building websites with beautiful typography.
-
react-pulse-text - demo/docs - 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-pdf - Display PDFs in your React app as easily as if they were images.
-
react-customizable-chat-bot - Demo - Build your own chatbot matching your brand needs in minutes.
-
@restpace/schema-form - Demo - Easily build complex forms automatically from a JSON Schema.
-
react-darkreader - A React Hook for adding a dark / night mode to your site inspired by darkreader.
-
react-apple-signin-auth - Apple signin for React using the official Apple JS SDK.
-
react-mrz-scanner - A React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer.
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
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
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
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
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
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
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