framework

These websites can be references for your design ideas

General framework

- MUI

• The React UI library you always wanted.
  https://mui.com/zh/ (opens in a new tab)

- Mantine (Recommended)

• Build fully functional accessible web applications faster than ever.
  https://mantine.dev/ (opens in a new tab)

- Prismane

• Build exceptional React apps with blazing speed.
  https://www.prismane.io/ (opens in a new tab)

- Ui aceternity

• Make your websites look 10x better.
  https://ui.aceternity.com/ (opens in a new tab)

- React Bootstrap

• The most popular front-end framework Rebuilt for React.
  https://react-bootstrap.github.io/ (opens in a new tab)

- Tailwind CSS

• A utility-first CSS framework packed with classes like flex rotate-90 that can be composed to build any design, directly in your markup.
  https://tailwindcss.com/ (opens in a new tab)

- daisyUI

• The most popular, free and open-source Tailwind CSS component library.
  https://daisyui.com/ (opens in a new tab)

- chakrauUI (Recommended)

• Create accessible React apps with speed.
  https://chakra-ui.com/ (opens in a new tab)

- React Toolbox

• Bootstrap your application with beautiful Material Design Components.
  http://react-toolbox.io/#/

- Primer React

• Primer React is a React implementation of GitHub's Primer Design System 🎉.
  https://primer.style/react/ (opens in a new tab)

- React95

• Refreshed Windows95 UI components for your modern React apps.Built with styled-components 💅
  https://github.com/arturbien/React95 (opens in a new tab)

- Blueprint

• A React-based UI toolkit for the web
  https://blueprintjs.com/ (opens in a new tab)

- Fluent UI

• A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior by Microsoft.
  https://developer.microsoft.com/en-us/fluentui#/ (opens in a new tab)

- Evergreen

• Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.
  https://evergreen.segment.com/ (opens in a new tab)

- primitives

• An open-source UI component library for building high-quality, accessible design systems and web apps.
  https://github.com/radix-ui/primitives (opens in a new tab)

- nextui (Recommended)

• Make beautiful websites regardless of your design experience (Best for next.js).
  https://nextui.org/ (opens in a new tab)

- React Suite

• A suite of React components, sensible UI design, and a friendly development experience.
  https://rsuitejs.com/ (opens in a new tab)

- Tamagui

• Universal design systems for React Native & Web, faster.
  https://tamagui.dev/ (opens in a new tab)

- React Spectrum

• A React implementation of Spectrum, Adobe’s design system.
  https://react-spectrum.adobe.com/react-spectrum/index.html (opens in a new tab)

- PrimeReact

• PrimeReact is a rich set of open source UI Components for React.
  https://www.primefaces.org/primereact/ (opens in a new tab)

- TDesign

• Enterprise Design System.
  https://tdesign.tencent.com/ (opens in a new tab)

- arco

• Intelligent design system Connect swift experience.
  https://arco.design/en-US (opens in a new tab)

- titian

• Titian Design Kit.
  https://titian.design.weimob.com/docs/react/components/start/quick-start (opens in a new tab)

- semi design

• Defines a set of mid-back design and front-end basic components, helping us to more easily create a more consistent user experience.
  https://semi.design/en-US/start/getting-started (opens in a new tab)

- didi

• Mobile component library designed for financial scenarios，which is based on Vue.js. It has been actually applied to more than 10 products in the four major financial business segments of DiDi Chuxing.
  https://didi.github.io/mand-mobile/#/en-US/docs/introduce (opens in a new tab)

- hiui

• HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.
  https://github.com/XiaoMi/hiui (opens in a new tab)

- react-chat-elements

• Reactjs chat elements chat UI, react chat components.
  https://github.com/Detaysoft/react-chat-elements (opens in a new tab)

- react-windows-ui

• Build Windows fluent UI apps using ReactJS.
  https://github.com/virtualvivek/react-windows-ui (opens in a new tab)

- geist

• An open source design system for building modern websites and applications.
  https://geist-ui.dev/en-us (opens in a new tab)

- React Winplaza 98

• React components for creating a Win98-like web interface.
  https://github.com/lisandro52/react-winplaza-98 (opens in a new tab)

- react-modal-sheet

• Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐.
  https://github.com/Temzasse/react-modal-sheet (opens in a new tab)

- gestalt

• Gestalt is Pinterest’s design system.
  https://gestalt.pinterest.systems/home (opens in a new tab)

- master.co

• A Virtual CSS language with enhanced syntax.
  https://css.master.co/#design (opens in a new tab)

- tremor (Recommended)

• The React library to build dashboards fast.
  https://www.tremor.so/ (opens in a new tab)

- xstyled

• Build your entire website using JSX and Props.
  https://xstyled.dev/ (opens in a new tab)

- shadcn/ui

• Re-usable components built using Radix UI and Tailwind CSS.
  https://ui.shadcn.com/ (opens in a new tab)

- react-pro-sidebar

• React Pro Sidebar provides a set of components for creating high level and customizable side navigation.
  https://github.com/azouaoui-med/react-pro-sidebar (opens in a new tab)

- camome ui

• Light weight, accessibleUI framework for React and CSS.
  https://camome.net/ (opens in a new tab)

- baseweb

• A React Component library implementing the Base design language.
  https://github.com/uber/baseweb (opens in a new tab)

- ariakit

• Toolkit for building accessible web apps with React.
  https://github.com/ariakit/ariakit (opens in a new tab)

- grommet

• Provides accessibility, modularity, responsiveness, and theming in a tidy package.
  https://github.com/grommet/grommet (opens in a new tab)

- eui

• Elastic UI Framework 🙌.
  https://github.com/elastic/eui (opens in a new tab)

- rewind-ui

• A fully customizable React-TailwindCSS component library Expressive, variant driven styling and configuration.
  https://rewind-ui.dev/ (opens in a new tab)

Icons / Avatars

- react-icons

• Include popular icons in your React projects easily with react-icons.
  https://github.com/react-icons/react-icons (opens in a new tab)

- Material Icons

• 2,000+ ready-to-use React Material Icons from the official website.
  https://mui.com/material-ui/material-icons/ (opens in a new tab)

- Phosphor Icons

• Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
  https://phosphoricons.com/ (opens in a new tab)

- @tabler/icons

• A set of 3108 free MIT-licensed high-quality SVG icons for you to use in your web projects.
  https://www.npmjs.com/package/@tabler/icons (opens in a new tab)

- boring-avatars

• Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
  https://github.com/boringdesigners/boring-avatars (opens in a new tab)

Animations

- react-swipeable-views

• A React component for swipeable views.
  https://github.com/oliviertassinari/react-swipeable-views (opens in a new tab)

- react-magic-motion

• react-magic-motion is a react.js library that ✨ magically animates your components.
  https://github.com/Etesam913/react-magic-motion (opens in a new tab)

- react-glow

• Add a mouse-tracing glow effect to React components.
  https://github.com/codaworks/react-glow (opens in a new tab)

- simpleParallax.js

• Easy Parallax Effect for React & JavaScript.
  https://github.com/geosigno/simpleParallax.js (opens in a new tab)

- typeit-react

• dynamic typewriter effects to your React applications.
  https://github.com/alexmacarthur/typeit/tree/master/packages/typeit-react (opens in a new tab)

- react-lottie-player

• Lightweight, scalable animations for your apps and website.
  https://github.com/mifi/react-lottie-player (opens in a new tab)

- framer-motion

• Production-ready declarative animations.
  https://www.framer.com/motion/ (opens in a new tab)

- particles-bg

• React component for particles backgrounds.
  https://github.com/lindelof/particles-bg (opens in a new tab)

- react-mouse-particles

• A mouse particle effect react component.
  https://github.com/lindelof/react-mouse-particles (opens in a new tab)

- react-three-fiber

• react-three-fiber is a React renderer for threejs.
  https://github.com/pmndrs/react-three-fiber (opens in a new tab)

- react-spring

• bring your components to life with simple spring animation primitives.
  https://react-spring.io/basics (opens in a new tab)

- codesurfer

• Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing to MDX Deck slides.
  https://codesurfer.pomb.us/ (opens in a new tab)

- Spline

• 🌈 Spline is a friendly 3d collaborative design tool for the web.
  https://github.com/splinetool/react-spline (opens in a new tab)

- react-rewards

• A package containing a few micro-interactions you can use to reward your users for little things and make them smile!
  https://github.com/thedevelobear/react-rewards (opens in a new tab)

- React Custom Roulette

• Repository for the react-custom-roulette library.
  https://github.com/effectussoftware/react-custom-roulette (opens in a new tab)

- atropos

• Stunning touch-friendly 3D parallax hover effects.
  https://github.com/nolimits4web/atropos/ (opens in a new tab)

- react-page-transition

• A React component that makes it easy to use the page transitions from the Codedrops page transitions demo with React.
  https://github.com/Steveeeie/react-page-transition (opens in a new tab)

- pagination

• React Pagination Component.
  https://github.com/react-component/pagination (opens in a new tab)

- scrollex

• Build beautiful scroll experiences using minimal code.
  https://github.com/malerba118/scrollex (opens in a new tab)

- img-comparison-slider

• Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
  https://github.com/sneas/img-comparison-slider (opens in a new tab)

- react-glider

• A ReactJS wrapper for Glider.js.
  https://github.com/kevinfarrugia/react-glider (opens in a new tab)

- react-quick-pinch-zoom

• A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
  https://github.com/retyui/react-quick-pinch-zoom (opens in a new tab)

- react-countup

• A configurable React component wrapper around CountUp.js.
  https://github.com/glennreyes/react-countup (opens in a new tab)

- tsparticles

• Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website.
  https://github.com/matteobruni/tsparticles (opens in a new tab)

- react-canvas-confetti

• React component for canvas-confetti library.
  https://github.com/ulitcos/react-canvas-confetti (opens in a new tab)

- react-hover

• React hover --- make hover easy.
  https://github.com/cht8687/react-hover (opens in a new tab)

- react-text-transition

• About Animate your text change.
  https://github.com/WinterCore/react-text-transition (opens in a new tab)

- image

• React Image Component.
  https://github.com/react-component/image (opens in a new tab)

- react-easy-infinite-scroll-hook

• A react hook that makes it easy to add infinite scroll to any component.
  https://github.com/vdmrgv/react-easy-infinite-scroll-hook (opens in a new tab)

- fireworks-js

• A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
  https://github.com/crashmax-dev/fireworks-js (opens in a new tab)

- react-tether

• React wrapper around Tether.
  https://github.com/danreeves/react-tether (opens in a new tab)

- windups

• A unique typewriter effect library for React.
  https://github.com/sgwilym/windups (opens in a new tab)

- react-medium-image-zoom

• 🔎 🏞 The original medium.com-inspired image zooming library for React.
  https://github.com/rpearce/react-medium-image-zoom (opens in a new tab)

- watching-you

• watching-you is a javascript library for building animations that watch anything on DOM 👀.
  https://github.com/jj811208/watching-you (opens in a new tab)

- react-inner-image-zoom

• A React component for zooming images.
  https://github.com/laurenashpole/react-inner-image-zoom (opens in a new tab)

- react-advanced-cropper

• To create croppers that exactly suited for your website design.
  https://github.com/advanced-cropper/react-advanced-cropper (opens in a new tab)

- react-easy-crop

• A React component to crop images/videos with easy interactions.
  https://github.com/ValentinH/react-easy-crop (opens in a new tab)

- react-flip-move

• Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
  https://github.com/joshwcomeau/react-flip-move (opens in a new tab)

- react-useanimations

• React-useanimations is a collection of free animated open source icons for React.js.
  https://github.com/useAnimations/react-useanimations (opens in a new tab)

- yet-another-react-lightbox

• Modern React lightbox component.
  https://github.com/igordanchenko/yet-another-react-lightbox (opens in a new tab)

- react-image-video-gallery

• Full featured image and video gallery lightbox component for react.
  https://www.lightgalleryjs.com/docs/react-image-video-gallery/ (opens in a new tab)

- floating-ui

• Toolkit to create floating elements: tooltips, popovers, dropdowns, and more.
  https://github.com/floating-ui/floating-ui (opens in a new tab)

- gooey-react

• The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽.
  https://github.com/luukdv/gooey-react (opens in a new tab)

- auto-animate

• A zero-config, drop-in animation utility that adds smooth transitions to your web app.
  https://github.com/formkit/auto-animate (opens in a new tab)

- react-flip-toolkit

• A lightweight magic-move library for configurable layout transitions.
  https://github.com/aholachek/react-flip-toolkit (opens in a new tab)

- breathing-halftone

• Awesome breathing halftone animation for pictures.
  https://github.com/ozluy/breathing-halftone (opens in a new tab)

- vaul

• An unstyled drawer component for React.
  https://github.com/emilkowalski/vaul (opens in a new tab)

- react-fast-marquee

• A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
  https://github.com/justin-chu/react-fast-marquee (opens in a new tab)

- react-simple-marquee

• Marquee build with React and CSS animation.
  https://github.com/masonwongcs/react-simple-marquee (opens in a new tab)

- @P5-wrapper

• A wrapper component that allows you to utilise P5 sketches within React apps.
  https://github.com/P5-wrapper/react (opens in a new tab)

Alert pop up

- sweetalert2-react-content

• Library showing animation of number changes in react.js.
  https://github.com/heyman333/react-animated-numbers (opens in a new tab)

- Mantine Notifications

• Mantine notifications system.
  https://mantine.dev/others/notifications/ (opens in a new tab)

- React-Toastify

• React notification made easy.
  https://github.com/fkhadra/react-toastify (opens in a new tab)

- react-hot-toast

• Smoking Hot React Notifications 🔥.
  https://github.com/timolins/react-hot-toast (opens in a new tab)

- sonner

• An opinionated toast component for React.
  https://sonner.emilkowal.ski/ (opens in a new tab)

- reapop

• 📮 A simple and customizable React notifications system.
  https://github.com/LouisBarranqueiro/reapop (opens in a new tab)

- nice-modal-react

• A modal state manager for React.
  https://github.com/eBay/nice-modal-react (opens in a new tab)

Scroll & slide effect

- react-awesome-reveal

• adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport (React AOS).
  https://github.com/morellodev/react-awesome-reveal (opens in a new tab)

- InfiniteGrid

• A module used to arrange card elements including content infinitely on a grid layout.
  https://naver.github.io/egjs-infinitegrid/ (opens in a new tab)

- react-grid-layout

• A draggable and resizable grid layout with responsive breakpoints, for React.
  https://github.com/react-grid-layout/react-grid-layout (opens in a new tab)

- react-intersection-observer

• React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. https://github.com/thebuilder/react-intersection-observer#readme (opens in a new tab)

- splide

• Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors. https://github.com/Splidejs/splide (opens in a new tab)

- react-use-wizard

• A React wizard (stepper) builder without the hassle, powered by hooks.
  https://github.com/devrnt/react-use-wizard (opens in a new tab)

- react-headroom

• Hide your header until you need it.
  https://github.com/KyleAMathews/react-headroom (opens in a new tab)

- react-parallax-tilt

• Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB).
  https://github.com/mkosir/react-parallax-tilt (opens in a new tab)

- react-parallax

• A React Component for parallax effect.
  https://github.com/rrutsche/react-parallax (opens in a new tab)

- react-scroll-parallax

• React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
  https://github.com/jscottsmith/react-scroll-parallax (opens in a new tab)

- react-joyride

• Create guided tours in your apps.
  https://github.com/gilbarbara/react-joyride (opens in a new tab)

- react-cool-dimensions

• 😎 📏 React hook to measure an element's size and handle responsive components.
  https://github.com/wellyshen/react-cool-dimensions (opens in a new tab)

- react-visual-grid

• Image Grid / Gallery for React.
  https://github.com/prabhuignoto/react-visual-grid (opens in a new tab)

- react-image-gallery

• IReact carousel image gallery component with thumbnail support 🖼.
  https://github.com/xiaolin/react-image-gallery (opens in a new tab)

- muuri

• Infinite responsive, sortable, filterable and draggable layouts.
  https://github.com/haltu/muuri (opens in a new tab)

- react-rnd

• 🖱 A resizable and draggable component for React.
  https://github.com/bokuweb/react-rnd (opens in a new tab)

- react-movable

• 🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
  https://github.com/tajo/react-movable (opens in a new tab)

- react-resizable-panels

• React components for resizable panels.
  https://github.com/bvaughn/react-resizable-panels (opens in a new tab)

- react-custom-scroll

• Easily customize the browser scroll bar with native OS scroll behavior.
  https://github.com/rommguy/react-custom-scroll (opens in a new tab)

- keen-slider

• The HTML touch slider carousel with the most native feeling you will get.
  https://github.com/rcbyr/keen-slider (opens in a new tab)

- react-insta-stories

• A React component for Instagram like stories.
  https://github.com/mohitk05/react-insta-stories (opens in a new tab)

- scrollytelling

• A library for creating Scrollytelling animations, powered by React & GSAP.
  https://github.com/basementstudio/scrollytelling (opens in a new tab)

- ScrollyVideo.js

• Components for scroll-based (or other externally controlled) playback.
  https://github.com/dkaoster/scrolly-video (opens in a new tab)

Calendar & Time

- fullcalendar-react

• The Most Popular JavaScript Calendar.
  https://fullcalendar.io/docs/react (opens in a new tab)

- timeago-react

• 🕗 Simple and efficient react component to format date with *** time ago statement. eg: '3 hours ago'.
  https://github.com/hustcc/timeago-react (opens in a new tab)

- planby

• React based component for a quick implementation of Epg, schedules.
  https://github.com/karolkozer/planby (opens in a new tab)

- react-timeago

• A simple time-ago component for ReactJs.
  https://github.com/nmn/react-timeago (opens in a new tab)

- react-big-calendar

• gcal/outlook like calendar component.
  https://github.com/jquense/react-big-calendar (opens in a new tab)

- react-chrono

• 🕜 Modern Timeline Component for React.
  https://github.com/prabhuignoto/react-chrono (opens in a new tab)

- relative-time-element

• Web component extensions to the standard <time> element.
  https://github.com/github/relative-time-element (opens in a new tab)

- luxon

• Luxon is a library for working with dates and times in JavaScript.
  https://github.com/moment/luxon/ (opens in a new tab)

- toast-ui/react-calendar

• React component wrapping TOAST UI Calendar.
  https://github.com/nhn/tui.calendar/tree/main/apps/react-calendar (opens in a new tab)

- react-calendar

• Ultimate calendar for your React app.
  https://github.com/wojtekmaj/react-calendar (opens in a new tab)

Data visualization

- react-chartjs-2

• React components for Chart.js, the most popular charting library.
  https://github.com/reactchartjs/react-chartjs-2 (opens in a new tab)

- react-charts

• Simple, immersive & interactive charts for React.
  https://github.com/TanStack/react-charts (opens in a new tab)

- Recharts

• A composable charting library built on React components.
  https://recharts.org/en-US/ (opens in a new tab)

- react-apexcharts

• 📊 React Component for ApexCharts.
  https://github.com/apexcharts/react-apexcharts (opens in a new tab)

- VICTORY

• React.js components for modular charting and data visualization.
  https://formidable.com/open-source/victory/ (opens in a new tab)

- visx

• visx | visualization components.
  https://github.com/airbnb/visx (opens in a new tab)

- reagraph

• 🕸 WebGL Graph Visualizations for React. Maintained by @goodcodeus.
  https://github.com/reaviz/reagraph (opens in a new tab)

- nivo

• Provides a rich set of dataviz components, built on top of D3 and React.
  https://nivo.rocks/ (opens in a new tab)

- polaris-viz

• A collection of React and React native components that compose Shopify's data visualization system.
  https://github.com/Shopify/polaris-viz (opens in a new tab)

- react-data-table-component

• React data table generator.
  https://github.com/jbetancur/react-data-table-component (opens in a new tab)

- react-admin

• React-admin offers the best developer experience, lets you focus on business needs, and build delightful user interfaces.
  https://marmelab.com/react-admin/ (opens in a new tab)

- graphire

• An unopinionated react graph visualization library.
  https://github.com/flavioschneider/graphire (opens in a new tab)

- glide-data-grid

• 🦝 Glide Data Grid is a no compromise, outrageously fast data grid for your React project, with rich rendering, first class accessibility, and full TypeScript support.
  https://github.com/glideapps/glide-data-grid (opens in a new tab)

- react-complex-tree

• Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop.
  https://github.com/lukasbach/react-complex-tree (opens in a new tab)

- react-open-weather

• React open weather is a React Component loading forecast data from Various weather providers.
  https://github.com/farahat80/react-open-weather (opens in a new tab)

- react-calendar-heatmap

• An svg calendar heatmap inspired by github's contribution graph.
  https://github.com/kevinsqi/react-calendar-heatmap (opens in a new tab)

- react-geo

• A set of geo related modules to use in combination with React, Ant Design and OpenLayers.
  https://github.com/terrestris/react-geo (opens in a new tab)

- react-circular-progressbar

• A circular progressbar component, built with SVG and extensively customizable.
  https://github.com/kevinsqi/react-circular-progressbar (opens in a new tab)

- react-inlinesvg

• AAn SVG loader component for ReactJS.
  https://github.com/gilbarbara/react-inlinesvg (opens in a new tab)

- toast-ui/react-chart

• React component wrapping TOAST UI Chart.
  https://github.com/nhn/tui.chart/tree/main/apps/react-chart (opens in a new tab)

- react-graph-gallery

• Build interactive charts for the web
  https://www.react-graph-gallery.com/ (opens in a new tab)

- frolic-react

• React Component Library to Build Analytics Dashboard 10x Faster
  https://github.com/frolicorg/frolic-react (opens in a new tab)

- react-plock

• The 1kB Masonry Grid for React.
  https://github.com/askides/react-plock (opens in a new tab)

- react-datasheet-grid

• An Airtable-like / Excel-like component to create beautiful spreadsheets.
  https://github.com/nick-keller/react-datasheet-grid (opens in a new tab)

Drawing / Board / Text / Utilis editor

- tldraw

• You can use this package to embed the tldraw editor in any React application.
  https://github.com/tldraw/tldraw (opens in a new tab)

- quilljs

• Your powerful rich text editor.
  https://quilljs.com/ (opens in a new tab)

- react-quill

• A Quill component for React.
  https://github.com/zenoamaro/react-quill (opens in a new tab)

- react-beautiful-dnd

• Beautiful and accessible drag and drop for lists with React.
  https://github.com/atlassian/react-beautiful-dnd (opens in a new tab)

- react-draggable

• A simple component for making elements draggable.
  https://github.com/react-grid-layout/react-draggable (opens in a new tab)

- react-flow

• library for building node based graphs.
  https://github.com/wbkd/react-flow (opens in a new tab)

- React DnD

• Drag and Drop for React.
  https://github.com/react-dnd/react-dnd/ (opens in a new tab)

- gridstack.js

• Mobile-friendly modern Typescript library for dashboard layout and creation.
  https://www.npmjs.com/package/gridstack (opens in a new tab)

- dnd-kit

• The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
  https://github.com/clauderic/dnd-kit (opens in a new tab)

- React Color

• A Collection of Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter, Material Design & more.
  https://casesandberg.github.io/react-color/#usage-include (opens in a new tab)

- react-colorful

• A tiny (2,8 KB) color picker component for React and Preact apps.
  https://github.com/omgovich/react-colorful (opens in a new tab)

- react-color

• 🎨 Is a tiny color picker widget component for React apps.
  https://github.com/uiwjs/react-color (opens in a new tab)

- tscircuit

• ⏣ React for Circuits.
  https://github.com/tscircuit/tscircuit (opens in a new tab)

- frappe

• A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales.
  https://frappe.io/gantt (opens in a new tab)

- turnstone

• React customisable autocomplete component with typeahead and grouped results from multiple APIs.
  https://github.com/tomsouthall/turnstone (opens in a new tab)

- Code Hike

• Not just a syntax highlighter.
  https://codehike.org/ (opens in a new tab)

- verbum

• Verbum is a fully flexible text editor based on lexical framework.
  https://github.com/ozanyurtsever/verbum (opens in a new tab)

- react-pin-field

• React component for entering PIN codes.
  https://github.com/soywod/react-pin-field (opens in a new tab)

- react-live

• A flexible playground for live editing React components.
  https://github.com/FormidableLabs/react-live (opens in a new tab)

- react-sketch-canvas

• Freehand vector drawing component for React using SVG as canvas.
  https://github.com/vinothpandian/react-sketch-canvas (opens in a new tab)

- dark-mode-toggle

• 🌓 A dark mode toggle component for React.
  https://github.com/anatoliygatt/dark-mode-toggle (opens in a new tab)

- react-image-crop

• A responsive image cropping tool for React.
  https://github.com/DominicTobias/react-image-crop (opens in a new tab)

- react-tooltip

• react tooltip component.
  https://github.com/ReactTooltip/react-tooltip (opens in a new tab)

- react-reader

• An ePub-reader for React, powered by Epub.js.
  https://github.com/gerhardsletten/react-reader (opens in a new tab)

- splitter

• React component for building split views like in VS Code.
  https://github.com/devbookhq/splitter (opens in a new tab)

- cmdk

• Fast, unstyled command menu React component.
  https://github.com/pacocoursey/cmdk (opens in a new tab)

- typist

• Typist is the mighty Tiptap-based rich-text editor React component that powers Doist products.
  https://typist.doist.dev/?path=/docs/readme--docs (opens in a new tab)

- react-cmdk

• 🔍 A fast, accessible, and pretty command palette for React.
  https://github.com/albingroen/react-cmdk (opens in a new tab)

- react-wrap-balancer

• Simple React Component That Makes Titles More Readable.
  https://github.com/shuding/react-wrap-balancer (opens in a new tab)

- kmenu

• 🌈 An animated and accessible command menu.
  https://github.com/harshhhdev/kmenu (opens in a new tab)

- react-chessboard

• The React Chessboard Library used at ChessOpenings.co.uk. Inspired and adapted from the unmaintained Chessboard.jsx.
  https://github.com/Clariity/react-chessboard (opens in a new tab)

Productive

- frappe.io gantt

• A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales.
  https://frappe.io/gantt (opens in a new tab)

- react-arborist

• A sortable, virtual, customizable tree component for React.
  https://github.com/brimdata/react-arborist (opens in a new tab)

Multimedia

- react-youtube

• Simple React component acting as a thin layer over the YouTube IFrame Player API.
  https://www.npmjs.com/package/react-youtube (opens in a new tab)

- react-lite-yt-embed

• React component version of lite-youtube-embed scaffolded with tsdx, which focus on visual performance, rendering just like the real thing but much faster.
  https://github.com/kylemocode/react-lite-yt-embed (opens in a new tab)

- lite-youtube-embed

• Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.
  https://github.com/paulirish/lite-youtube-embed (opens in a new tab)

- react-photo-view

• An exquisite React photo preview component.
  https://github.com/MinJieLiu/react-photo-view (opens in a new tab)

Map

- Pigeon Maps

• ReactJS maps without external dependencies.
  https://pigeon-maps.js.org/ (opens in a new tab)

- React Leaflet

• React components for Leaflet maps.
  https://react-leaflet.js.org/ (opens in a new tab)

- Reactive Maps

• Build Geolocation Apps.
  https://opensource.appbase.io/reactivemaps/ (opens in a new tab)

- react-map-gl

• React friendly API wrapper around MapboxGL JS.
  https://github.com/visgl/react-map-gl (opens in a new tab)

- react-simple-maps

• Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.
  https://www.react-simple-maps.io/ (opens in a new tab)

- react-google-maps

• React component and hooks library for Google Maps.
  https://github.com/visgl/react-google-maps (opens in a new tab)

- react-geo

• providing a large number of components to build modern mapping applications. It is used in combination with React, OpenLayers and Ant Design.
  https://terrestris.github.io/react-geo/docs/latest/#/Introduction (opens in a new tab)