Awesome React Components
by brillout · brillout/awesome-react-components
Curated list of React components and libraries.
, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
RBarcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.
RCamera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
RHighly configurable & extensible automatically sized input field built with hooks.
R<textarea /> component for React which grows with content.
CExpress integration in TypeScript with support for multiple SPAs and pitfall avoidance.
Edocs - demo - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.
EBoilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI.
Next generation build system with first class monorepo support and powerful integrations.
PA simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
RHighly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
RSimple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.
Free Shadcn Dashboard Template Built On React and Tailwind CSS comes with Multiple-framework support
Rdemo - 3D animated 60fps buttons with load progress and social share actions.
Rdemo - docs - A beautiful animated button component with progress indicator.
@A class name focused component builder with a syntax like styled components and the sugar of cva's variants.
AA 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.
RA lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
RReact Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
RDemo Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets
Rnpm - demo - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
Rdemo - Fullpage, 3D animated, 60fps media and content slider/carousel.
Rdemo - A slider component with pinch to zoom capabilities inspired by Instagram.
Sdemo - docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
High-performance plugin-based chart for Bootstrap and Material Design.
JReact chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
Rdemo - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
RReact wrapper for muze(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
Rdemo - Universal, semantic and CSS-only components for creating Accordions and Tabs.
RA tiny (2,5 KB), dependency-free, fast and accessible color picker component.
Qdocs Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
RRelay is a JavaScript framework for building data-driven React applications.
Bdemo - docs - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
DCollection of reusable React Components and utility functions.
Rdemo - docs - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
Tdocs - A collection of Ready-made ShadCN UI components you can directly plug into your React/Next.js projects.
Rdemo - Easily customize the browser scroll bar with native OS scroll behavior.
RComponent that customizes the image and inserts shadow when scrolling exists.
Fdemo - docs Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend
RA performant, scalable and pluggable approach to instrumenting your React application.
RReducer + action to reduce actions under a single subscriber notification.
Sdocs A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.
docs - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
BAPI-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.
RUniversal client/server routing and data with AWS DynamoDB.
Ddemo - A calendar component that supports date, range & ranges picks.
High-performance plugin-based scheduler/calendar for Material Design.
SMaterial design event calendar and date picker components. Demo site: https://schedule-x.dev/
NMulti-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.
RAccessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
AAdvanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
FAn online spreedsheet component that provides out-of-the-box features just like Excel.
GSorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
Hdemo - docs - Data Grid with spreadsheet-like UI supporting React, Angular, TypeScript and JavaScript.
Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.
Mdemo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
Rdemo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
SA high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
demo - docs - React DataGrid with in-cell editing, tree data, context menu, virtual scrolling, etc.
IA React based emoji picker powered by Interweave and Emojibase.
Hdocs - A lightweight, dependency-free solution React hooks for form validation.
PDocs & Demos - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.
BA bit of nifty glue that automatically plugs your Backbone models.
EA React component which wraps an Elm module to be used in a React application.
GOpenGL / WebGL bindings for React to implement complex effects over images and content.
RSimple componentized localstorage implementation for Facebook's React.
RIntegration of React + Webpack + Rails to build Universal (Isomorphic) Apps.
RUnity intergration with two-way communication using a built-in Event System.
Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
RWith react-icomoon you can easily use the icons you have selected or created in icomoon.
A set of over 450 free MIT-licensed high-quality SVG icons.
RA react cropper library to create the cropper exactly suited for your website design.
RComponent to crop/rotate images/videos with easy interactions. Touch friendly.
RA ready-to-use image cropping library highly inspirited by popular Android croppers. Based on react-advanced-cropper.
@npm - demo - A module used to arrange card elements including content infinitely according to various layout types.
RLazyload your Component, Image or anything else where the performance matters.
Rdemo - React components for efficiently rendering large lists and tabular data
Vdemo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.
@docs - Secure, hardened form components that encrypt/tokenize all data automatically.
Rdemo - A zero-dependency container to help with payment card input fields.
RLoad stripe's checkout.js as a react component. Easiest way to use checkout with React.
WServer-side rendering for your Webpack-built applications (e.g. React).
RA suite of React components and hook for selecting sibling components through the keyboard.
RReact component that renders children elements when they enter the viewport.
RReact components for efficiently rendering large lists and tabular data.
RSVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
GUniversal google map react component, allows render react components on the google map.
MA library for integrating Apple Maps using MapKit JS, with annotations, overlays, and search.
RA simple markdown editor with preview, implemented with React.js and TypeScript.
RReact component wrapper for EasyMDE (the most fresh SimpleMDE fork).
MFull suite of components. Build your own design system, or start with Material Design.
RProvide props to your Components based on their Width and/or Height.
Mdemo/docs - Context-menu hook/component for applications built with Mantine UI.
@demo - A fully themeable and accessible numeric stepper component.
@Demo - Easily build complex forms automatically from a JSON Schema.
Cdemo - docs - A next-generation tool to create blazing-fast documentation sites.
DSmall JavaScript Compiler for quickly converting JSX to JS directly on a web page.
Fdemo-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA.
HExtract annotated portions of HTML into React components as separate modules.
IReact library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
MMozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
Rdemo - A flexible and animated vertical news ticker component
RAllows users to create random kaleidoscopes to be used as avatars.
Rdemo - Visual query builder from form fields, with SQL, MongoDB and JSON export
RDemo - Build your own chatbot matching your brand needs in minutes.
RA React Hook for adding a dark / night mode to your site inspired by darkreader.
REasy to configure, lightweight, editable vector graphics in your react components.
RFile input component for control for file reading styling and abstraction.
RThe React filterbuilder component for building the filter criteria in the UI.
RAuto-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.
RCreate walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
RDemo A component that allows selecting DOM elements by moving the mouse
RA React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer.
Rdemo/docs - Allows you to animate the text of any property of another component.
Rdemo - Configurable component to render list with swipeable items.
R:tada: support react hooks everywhere (Functional or Class Component).
RA new approach to MVVM in React, to enforce clean separation of concerns, reduce boilerplate, and automatic re-render optimization for scalable UI logic.
RComplete token authentication system for react + redux that supports isomorphic rendering.
Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
Odemo/docs - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.
demo - docs - Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Rdemo - is a lightweight, promise-based confirmation dialog for React with built-in Tailwind CSS support. It’s designed to be as simple to use as react-toastify, while remaining fully customizable.
Rdemo - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
Rdemo - docs - show feedback linked to particular component instead of app-wide toasts.
Rdemo - Highly customizable and easy-to-use component for notifications.
RA fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
Sdemo/docs - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
SOfficial SweetAlert2 enhancer adding support for React elements as content
Sdemo - The easiest way to get a parallax effect with React and JavaScript on images
@Define zoom regions for smart responsive images.
Zdemo - docs - A little yet powerful framework agnostic library to zoom image on the web
RSimple but ubiquitously powerful and agnostic layering system for React.
RReact component for transportation of modals, lightboxes, loading bars... to document.body.
RA simple, declarative, and composable way to fetch data for React components.
RDevTools for Redux with hot reloading, action replay, and customizable UI.
Ademo/docs - A UI Design Language from China. Individual components available.
Atlassian's official UI library, with components from badge to tree table.
Base Web is a foundation for initiating, evolving, and unifying web products.
Cdemo - docs - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
Cdemo/docs - Simple, Modular & Accessible UI Components for your React Applications.
FOpen-source UI component library based on React, Tailwind CSS, and Flowbite.
FUX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
Mdemo/docs - A fully featured library with 100+ hooks and components with native dark theme support
PA complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
Unstyled, accessible components for building high‑quality design systems and web apps.
SReact UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
Sdemo - docs - Beautifully designed components that you can copy and paste into your apps.
Sdemo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
Udemo - Beautifully crafted collection of components built with React Aria and Tailwind CSS.
Sdemo - docs - A completely customizable framework for building rich text editors.
RRedux First History - Redux history binding support react-router - @reach/router - wouter
Rdemo - Micro-sized & micro-optimized select component for React.js.
IThe easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
RA library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments
RSyntax highlighting component with Prismjs or Highlightjs AST using inline styles.
High-performance plugin-based data grid for Bootstrap and Material Design.
Kdemo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.
Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.
Mdemo/docs - Lightweight table component for Mantine UI applications, with lots of features
MA fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
Mdemo/docs - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
MBuilt on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
Rdemo/docs - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
Rdemo - React Table Library -- an almost headless table library -- for building better tables.
Sdemo - docs - Lightweight, fast and feature rich. Sorting/filtering, virtualization, tree data, nested headers, pinned columns, customized styling etc.
RA redux middleware to automatically generate tests for reducers through ui interaction.
RReact testing made easy with react-test-renderer. Supports DOM and custom renderers.
UPlugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
@demo - A fully themeable and accessible heart-shaped toggle switch component.
RAn elegant, accessible toggle component for React. Also a glorified checkbox.
Hdemo - docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.
Rdemo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
Rdemo - docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
RA textarea to colorize, highlight, decorate texts and offer autocomplete.
IAn extremely fast, React-like JavaScript library for building modern user interfaces.
AA component that scale dynamically according to the internal children size
Gdemo/docs - The gooey effect for React, used for shape blobbing / metaballs.
REffortless animation between DOM changes (eg. list reordering) using the FLIP technique.
RApply transition effect to numeric strings, a la old Groupon timers.
Rdemo - Easy to use and customizable typewriter effect for any text.
RA lightweight component to easily create interactive particles animations
Rdemo/samples - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc
RResponsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
RA draggable and resizable grid layout with responsive breakpoints, for React.
Rdemo - Build responsive layouts using styled schematics without an overhead of any theme configuration
RA React component to execute a function whenever you scroll to an element.
@docs – Web-based localization tool enabling users to translate directly in the React app they develop
Jdocs – A readable, automated, and optimized (5 kb) internationalization for JavaScript.
RInternationalization for react done right. Using the i18next i18n ecosystem.
Rdemo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
RUniversal internationalization (i18n) open source library for React.
@
B
R
M
R
R
R
R
V
R
R
R
C
C
E
G
N
P
A
I
R
R
R
S
S
R
P
K
P
R
R
R
E
E
E
F
R
R
R
R
R
R
R
R
R
R
R
V
R
R
C
R
K
A
L
M
R
R
S
R
B
C
E
K
R
R
T
R
R
R
R
R
R
R
R
R
R
R
R
R
R
R
F
F
R
R
D
F
F
R
R
R
R
R
S
R
R
R
R
R
R
R
J
R
R
R
R
R
@
R
R
R
R
R
R
R
R
R
R
R
R
R
R
R
H
I
R
R
R
R
R
R
U
R
R
R
R
R
R
R
R
R
R
R
M
R
R
R
R
R
R
R
R
R
R
C
C
I
J
P
R
R
R
R
R
R
R
R
R
R
R
R
R
R
S
S
T
T
R
R
R
@
R
P
R
R
R
L
R
R
R
R
R
R
R
R
A
R
R
R
R
C
C
E
G
G
K
O
R
R
R
S
S
T
A
C
E
M
R
R
R
R
R
R
R
R
S
T
R
W
H
R
R
R
R
R
S
R
R
R
G
T
R
R
R
T
R
R
R
R
R
R
R
J
R
R
R
D
F
R
R
R
R
R
R
R
R
A
H
M
M
R
R
R
R
R
R
Q
R
R
R
R
R
R