React components

Ladle is nice tool to develop/share react components. How to use Props in React is a good guide.

I now am using Solid for all my web apps and static sites, so trying to port many useful hooks from here for Solid.

Notes

Design System opinion: Don't make your <Link> and <Button> components support both link and button visuals. Do make your <Link> and <Button> components renders either <a> or <button> based on the props passed to it ("to" should render an anchor, "onClick" should render a button)

Other

Belle - Configurable React Components with great UX.
React Table - Hooks for building fast and extendable tables and datagrids for React. (HN)
Blueprint - React-based UI toolkit for the web.
Ant Design - UI Design Language.
kit - Tools for developing, documenting, and testing React component libraries.
React Spring - Set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs.
SVGR - Transform SVGs into React components.
Shopify - Shopify’s product component library.
react-jsonschema-form - React component for building Web forms from JSON Schema.
react-dropzone - Simple HTML5 drag-drop zone with React.js
React Kawaii - Cute React UI Components.
React Select
Primer Components - Primer React components.
react-movable - Drag and drop for your React lists and tables. Accessible. Tiny.
Semantic UI React - Official Semantic-UI-React integration.
React Sidebar - Sidebar component for React.
The Platform - Web API's turned into React Hooks and Suspense-friendly React components.
Reakit - Toolkit for building really interactive UIs with React.
libreact - Collection of useful React components.
React Circular Progressbar - Circular progress indicator.
React Window - React components for efficiently rendering large lists and tabular data.
React Flip Toolkit - Utility library for highly configurable layout transitions.
React Calendar
Recharts - Redefined chart library built with React and D3.
Found - Extensible route-based routing for React applications.
Reuse - Reuse different React components to create new ones.
React Geosuggest - React autosuggest for the Google Maps Places API.
loadable-components - React code splitting made easy. Reduce your bundle size without stress.
react-tiny-virtual-list - Tiny but mighty list virtualization library, with zero dependencies.
React Morph - Morphing UI transitions made simple.
React Virtuoso - Simple, easy to use React component made to render huge data lists.
Tipple - Lightweight dependency-free library for fetching data over REST with React.
react-component-benchmark - Component to help benchmark React components and their trees.
react-async-component - Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.
react-teleporter - Teleport React components in the same React tree.
re-resizable - Resizable component for React.
react-tiniest-router - Tiniest router for React, built with hooks.
react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook cards loading).
react-hook-form - Performant, flexible and extensible forms with easy to use validation.
rest-hooks - Delightful data fetching for React.
Framer Motion - Open source, production-ready animation and gesture library for React. (Web) (Visual debugger for Framer Motion)
react-highlight-words - React component to highlight words within a larger body of text.
Hooked-Form - Form library implemented with Hooks.
stated-bean - Light but scalable state management library with react hooks, inspired by unstated-next.
Why Did You Render - Monkey patches React to notify you about avoidable re-renders.
react-day-picker - Flexible date picker for React.
react-a11y-dialog - React component for a11y-dialog relying on React portals to ease the use of accessible dialog windows in React applications.
prism-react-renderer - Renders highlighted Prism output to React (+ theming & vendored Prism).
Naph - React Component for rendering Node Graphs.
React Spinners - Collection of loading spinner components for react.
react-teleporter - Teleport React components in the same React tree.
Stack Styled - Stacking layouts for React.
Rethinking Navigation - Exploration of a component-first API for React Navigation for building more dynamic navigation solutions.
craft.js - React Framework for building extensible drag and drop page editors.
React Iframe - Simple solution for using iframes in React.
clack-react - Provides two React components that enable keyboard shortcuts in React.
React Wizard Primitive - React wizard primitive - built with hooks.
console-feed - Captures console.log's into a React Component.
react-json-view - React component for displaying and editing javascript arrays and JSON objects.
react-suspense-router - React Router for React Suspense and Render-as-You-Fetch.
react-range - Range input with a slider. Accessible. Bring your own styles and markup.
react-markdown - Renders Markdown as pure React components.
React Stripe.js - React components for Stripe.js and Stripe Elements.
React Split Pane - React split-pane component.
react-soft-slider - Simple, fast and impartial slider.
restful-react - Consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs.
Iconify - Modern open source SVG alternative to glyph fonts.
Formsy - Form input builder and validator for React.
React Frontload - Async data loading for React components, on client & server. (Docs)
stop-runaway-react-effects - Catches situations when a react use(Layout)Effect runs repeatedly in rapid succession.
react-zoom-pan-pinch - Super fast and light react npm package for zooming, panning and pinching html elements in easy way.
ReactShadow - Utilise Shadow DOM in React with all the benefits of style encapsulation.
React GridList - Virtual-scrolling GridList component based on CSS Grids.
React Charts - Simple, immersive and interactive charts for React.
Spinners React - Lightweight SVG/CSS spinners for React.
hamburger-react - Animated hamburger menu icons for React.
react-see-through - Draw attention to the important parts of your website.
react-error-boundary - Simple reusable React error boundary component.
Eitherx - Super simple, reusable either-or error boundaries for React.
Motion Layout - Beautiful immersive React hero animations.
React Focus Lock - Browser friendly focus lock.
Bedrock - Foundational Layout Primitives for your React App.
React-Focus-On - Solution for WAI ARIA compatible modal dialogs or full-screen tasks.
downshift - Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components.
Muuri-React - React implementation of the amazing Muuri layout engine.
react-flow-diagram - Batteries included React Component for rendering, creating and editing Diagrams.
react-diagrams - Super simple, no-nonsense diagramming library written in react that just works.
React Flow - Library for Rendering Interactive Graphs. (Article) (HN) (HN 2) (Web)
React Flow Chart - Flexible, stateless, declarative flow chart library for react.
react-polymorphic-types - Zero-runtime polymorphic component definitions for React.
react-scroll-percentage - Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.
react-magnifier - React image zoom component.
ReactReparenting - Reparenting tools for React. (Web) (Article)
windups - Typewriter effect library for React. (Web)
React Shimmer - Async loading, performant Image component for React.js.
react-textarea-autosize - Drop-in replacement for the textarea component which automatically resizes textarea as content changes.
Caldera - Server-side execution environment for React.
react-tooltip - React tooltip component.
react-sortable-pane - Sortable and resizable pane component for React.
gooey-react - Gooey effect for React, used for shape blobbing. (Web)
konva-grid - Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets.
react-spring-lightbox - Flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
React-Toastify - React notification made easy.
React Ranger - Hooks for building range and multi-range sliders in React.
react-simple-maps - Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.
SWR + Firestore - Implement Vercel's useSWR for querying Firestore in React/React Native/Expo apps.
react-collapse-pane - Splittable, draggable, collapsible panel layout library.
FlexLayout - Multi-tab layout manager.
Formik - Build forms in React, without the tears. (Formik vs Plain React for Forms – Worth it?) (Formik Devtools)
FullCalendar - Full-sized drag & drop JavaScript event calendar.
React DnD - Drag and Drop for React. (The secret is it’s just one flat list with pointers and css to make it look nested) (Multi List Drag and Drop With react-beautiful-dnd, Immer, and useReducer) (Docs) (react-dnd-accessible-backend)
react-smooth-dnd - React wrapper components for smooth-dnd.
FullCalendar - Official React component for FullCalendar.
React Cookies - Load and save cookies within your React application.
react-sortablejs - React component built on top of the mature drag and drop library, Sortable.
Reactive - Reactive approach to create React application.
react-recaptcha - React.js reCAPTCHA for Google.
React-Chrono - Modern Timeline component for React. (HN)
react-force-graph - React component for 2D, 3D, VR and AR force directed graphs.
jsxui - Primitive elements to build isomorphic user interfaces in React.
raam - Beautifully boring cosmetic-free primitives for structure and layout. (Web)
Notistack - Highly customizable notification snackbars (toasts) that can be stacked on top of each other.
React Hotkey Tooltip - Global Hotkey provider with built in tooltip for React.
react-contenteditable - React component for a div with editable contents.
use-tweaks - Tweak React components with Tweakpanes.
repng - React component to PNG converter, built with Puppeteer.
react-calendly - Calendly integration for React apps.
react-s3-uploader - Provides a React component that automatically uploads to an S3 Bucket.
beautiful-react-diagrams - Tiny collection of lightweight React components for building diagrams with ease.
Rough Charts - Responsive, composable react charting library with a hand-drawn style.
React iOS Corners - iOS like border-radius corners react component.
React Insta Stories - React component for Instagram like stories.
Reapop - Simple and customizable React notifications system.
react-responsive-modal - Simple responsive react modal.
Graph editor - React component which enables creating flow editors with ease.
React Lite YouTube Embed
Lioness - React library for efficiently implementing Gettext localization.
React Command Palette - Accessible browser compatible javascript command palette.
React Leaflet - React components for Leaflet maps.
React ApexCharts - React.js wrapper for ApexCharts to build interactive visualizations in react.
dnd kit - Modern drag and drop toolkit for React. (Web)
react-archer - Draw arrows between DOM elements in React.
React Layout Components - Layout components for React, primarily inspired by Every Layout.
React Popper - React wrapper around Popper tooltip library.
react-overlays - Utilities for creating robust overlay components.
suspendable - Utilities to create resources that can suspend in React.
Procedural GL React - React component for the Procedural GL JS library. (HN)
Renderlesskit React - Headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System.
react-virtualized-tree - Virtualized tree view component making use of react.
Glide Data Grid - High-performance React grid component, with rich rendering and first-class TypeScript support. (Reddit)
React Colorful - Tiny color picker component for React and Preact apps.
Homebase React - Graph database for delightful React state management.
react-svg - React component that injects SVG into the DOM.
Gitalk - Modern comment component based on GitHub Issue and Preact.
Mafs - React components for math visualization. (Docs) (Web)
react-masonry-css - React Masonry layout component powered by CSS, dependency free.
Bumbag - Friendly React UI Kit suitable for MVPs or large-scale applications. (Code)
ractive-player - Library for interactive videos in React. (Web)
Slang - Theme-able react component library for fast UI development.
React-Menu - Accessible, responsive, and customizable React menu library.
Leva - React-first components GUI.
react-ast - Render abstract syntax trees using react.
Chakra-UI AutoComplete - Accessible Autocomplete Utility for Chakra UI that composes Downshift ComboBox.
Supabase UI - React UI library.
Reactjs-popup - React Popup Component - Modals, Tooltips and Menus. All in one.
use-click-outside - React hook to detect clicks outside of the components. With shadow DOM support.
Playground - HTML, CSS and JS demonstration component that runs entirely in the browser and does not require loading any third party sites.
JSON Schema Viewer
Inspx - Pixel perfect layout inspection.
Embrace - Typesafe, declarative, and composable UI engine on top of React and Focal.
React ECS - Declarative Entity Component System for React.
Replay - React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
candycode/elements - Basic ingredients for baking custom React components spiced with spring physics.
Mantine - React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience. (Web) (Reddit)
re-position - Drag, resize, and rotate all in one flexible React component.
masonic - High-performance masonry layouts for React.
react-loosely-lazy - Use advanced React async components patterns today.
Supabase Grid - React component to display your PostgreSQL table data.
threaded-comments - Reddit styled threaded comments using Supabase and Next.js.
Nano Stores - Tiny (198 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores. (Tweet)
React Lazy Hydration - Lazy Hydration for Server Rendered React Components.
React Super Command - Sleek command line modal for React apps.
React Complex Tree - Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop.
react-easy-sort - React component to sort items in lists or grids.
ReactToPrint - Print React components in the browser.
react-calendar - Headless Calendar UI Library based plugin system.
React Aspen - Most advanced nested tree renderer for React apps.
react-map-interaction - Add map like zooming and dragging to any element.
Remount - Mount React components to the DOM using custom elements.
React Scroll Parallax - React components to create parallax scroll effects for banners, images or any other DOM elements.
react-xarrows - Draw arrows between components in React.
react-code-blocks - React components for rendering code snippets with syntax highlighting.
reaflow - React library for building workflow editors, flow charts and diagrams.
React Financial Charts - Charts dedicated to finance.
ReactPlayer - React component for playing a variety of URLs.
Vechai UI - Collection of Accessible React UI Components using TailwindCSS. (Docs)
vazco/uniforms - Set of React libraries for building forms from every schema. (Web)
React Fullscreen Image - Accessible, fast, and snappy full screen React image viewer.
React Sizeme - Make your React Components aware of their width and height.
NextUI - Beautiful, fast,modern React UI Library. (Code)
React Date Picker - Simple and reusable Datepicker component for React. (Web)
focus-trap-react - React component that traps focus.
react-embed - Embed 3rd party widgets.
Choc UI - Prebuilt Chakra UI Higher Order Components. (Web)
LottiePlayer - Lottie web player as a react component.
React Autosuggest - WAI-ARIA compliant React autosuggest component.
react-chartjs-2 - React wrapper for Chart.js.
replicache-react - Miscellaneous utilities for using Replicache with React.
ClickableBox - React component to add onClick to HTML elements without sacrificing accessibility.
react-intersection-observer - React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
react-ux-form - Simple, fast, and opinionated form library for React & React Native focusing on UX.
React Overlay Trigger - Auto repositioning overlay component for react. (Article)
Nice Modal - Small, zero dependency utility to manage modals in a natural way for React.
React InfiniteGrid - React component that can arrange items infinitely according to the type of grids.
React-Location - Enterprise Client-Side Routing for React. (Docs)
tldraw/core - TLDraw core renderer and utilities.
React Freeze - Prevent React component subtrees from rendering. (Experimenting with React Freeze)
react-ancenstry - Get the component ancestry in React.
typeahead - Small, fast, opinionated autocomplete input for React.
co-media - React library for accessing browser media like camera, microphone, screen capture, etc.
React Responsive Carousel - React.js Responsive Carousel (with Swipe).
Theme Provider - Set of utilities that help you create your own React theming system in few easy steps.
Splitter - React component for building split views like in VS Code.
React-Transition-State - Perform animation and transition of React component with ease.
Graphire - Declarative and unopinionated graph visualization library for React.
React Flow Smart Edge - Special Edge for React Flow that never intersects with other nodes.
rci - Better code inputs for the web.
Formiz - React forms with ease! Composable, headless & with built-in multi steps.
restack - SwiftUI inspired layouts for React.
react-rewards - Microinteractions you can use to reward your users for little things and make them smile.
Informed - Lightweight framework and utility for building powerful forms in React applications.
react-lineto - Draw a line between two elements in React.
Hacky - Functional component-based UI library.
Charts.css React
Editable React Table - React table built to resemble a database.
React Layers Manager - Manage layers and z-index in React applications effectively.
chakra-react-select - Chakra-ui wrapper for the popular select library react-select.
Formily - Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3.
React Feather Icons
react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
yandex/ui - Yandex UI Kit build on React and bem-react.
iframe-resizer-react - Enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content.
React Table Library
React Zorm - Type safe <form> for React using Zod.
LYTS - Layout primitives for React. (Tweet)
Rough Notation React
React Lazylog - React component that loads and views remote text in the browser lazily and efficiently.
react-spring-bottom-sheet - Built on top of react-spring and react-use-gesture.
react-photoswipe-gallery - Configurable and flexible React component wrapper around PhotoSwipe.
React-Resizable - Simple React component that is resizable with a handle.
React Loading Skeleton - Make beautiful, animated loading skeletons that automatically adapt to your app.
react-aria-components - Prototype of a higher level component-based API on top of React Aria.
react-layout - Layout primitives for React, including Box, Cluster, Grid, Row, Column, and Layer.
UI Kit for Cube Cloud - UI Framework for Cube Projects. Based on React Aria.
React tags - Simple tagging component for your projects.
rich-textarea - Small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
react-cursor-chat - React component helps bring Figma's Cursor Chat to your web applications.
heart-switch - Heart-shaped toggle switch component for React.
react-select-search - Lightweight select component for React.
react-portabletext - Render Portable Text with React.
Fomir - Schema-First Form Library. (Docs)
react-tree - Hierarchical tree component for React in Typescript.
React Awesome Shapes - Insert Awesome Shapes into Your React Site with Ease.
React Photo View - Exquisite React photo preview component.
React H5 Audio Player - React audio player component with UI. It provides time indicator on both desktop and mobile devices.
react-ansi-dumi - Foldable and searchable ansi log viewer for React.
Interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
React Cool Img
spacefold - Use Pub/Sub pattern inside your React applications easily.
React Resize Detector - Cross-Browser, Event-based, Element Resize Detection for React.
react-spline - Allows you to export and use Spline scenes directly in your React websites.
React Use Intercom - React Intercom integration powered by hooks.
React Arborist - Sortable, virtual, customizable tree component for React. (HN)
Stream Chat React SDK - React components for Stream Chat, a service for building chat applications.
Allotment - React split-pane component.
react-helmet-async - Thread-safe Helmet for React 16+ and friends.
compose-providers - Compose your React provider components to avoid boilerplates.
GitLanding - Create a beautiful landing page for your GitHub projects.
react-text-loop-next - Animate words in your headings.
react-map-gl - React friendly API wrapper around MapboxGL JS.
Formspree React - React component library for Formspree.
rediagram - Markup and draw your system diagrams with React.
react-modal - Accessible modal dialog component for React.
React Terminal - React component that renders a Terminal.
ReactSSML - Utilize the full power of React to develop voice UIs.
Tiny UI - Friendly UI Component Set for React.
React Spotify Web Playback SDK - React wrapper for Spotify Web Playback SDK.
Font Picker for React - Font selector component for Google Fonts.
dayzed - Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components.
React Infinite Scroll - Awesome Infinite Scroll component in react.
React Fast Marquee - Lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.
React Mentions - React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
Selecto.js - Component that allows you to select elements in the drag area using the mouse or touch.
React RND - Resizable and draggable component for React.
React Motion Router - Declarative routing library for React with page transitions and animations.
React Square Web Payments SDK - Easily create PCI-compliant inputs to accept payments online with the Square Payments API.
React Page Visibility - Declarative, nested, stateful, isomorphic page visibility for React.
React Idle Timer - User activity timer component. (Web)
React Forked DND - Beautiful and accessible drag and drop for lists with React.
React in out text area - Simple React.js component that is like Google Translate.
Reakit - Toolkit for building accessible web apps with React. (Code)
Reagraph - High-performance network graph visualization built in WebGL for React.
Reactour - Set of Assistants to travel into your React Components.
react-responsive - CSS media queries in react - for responsive design, and more.
React Socks - React library to render components only on specific viewports.
Planby - React based component that lets you implement your own Timeline so fast and simple. (Web)
lil UI components (Code)
Formation - 20+ react-based UI components. (Code)
Frogress - Line Progress Bar UI for React. Natural color gradients & Coherent border rounding.
react-easy-crop - React component to crop images/videos with easy interactions.
React-CMD-K - Fast, accessible, and pretty command palette for React.
React Lottie Player - Fully declarative React Lottie player.
React Keyboard Navigator - Suite of React components and hook for selecting sibling components through the keyboard.
React Local Toast - Local toast helps you to provide feedback related to particular components on page.
React Lite YouTube Embed - Private by default, faster and cleaner YouTube embed component for React applications.
KMenu - Animated and accessible command menu.
Foldable - Fully automated and animated Collapse primitive.
Tunnel-Rat - Potential cross renderer portal.
CmdK - Fast, unstyled command menu React component. (Web)

React components

Notes​

Other​

Links​

Notes

Other

Links