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)

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

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

- 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

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

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)

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

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

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)

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

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

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)

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)

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

- 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-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-circular-progressbar

• A circular progressbar component, built with SVG and extensively customizable.
  https://github.com/kevinsqi/react-circular-progressbar (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)

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

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

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

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)