---
visibility: public
---

# React

**repo:** [enaqx/awesome-react](https://github.com/enaqx/awesome-react)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[javascript|JavaScript]] · [[typescript|TypeScript]] · [[next-js|Next.js]] · [[react-native|React Native]] · [[redux|Redux]]

---

# Awesome React [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

A collection of awesome things regarding the React ecosystem.

- [React](#react)
  - [React General Resources](#react-general-resources)
  - [React Tutorials](#react-tutorials)
  - [React Frameworks](#react-frameworks)
  - [React Component Libraries](#react-component-libraries)
  - [React State Management and Data Fetching](#react-state-management-and-data-fetching)
  - [React Styling](#react-styling)
  - [React Icon Libraries](#react-icon-libraries)
  - [React Routing](#react-routing)
  - [React Development Tools](#react-development-tools)
  - [React Libraries](#react-libraries)
  - [React Testing](#react-testing)
  - [React [Awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) Components](#react-awesome-components)
  - [React Components Sandboxes](#react-components-sandboxes)
  - [React Forms](#react-forms)
  - [React Tables and Grids](#react-tables-and-grids)
  - [React Maps](#react-maps)
  - [React Charts](#react-charts)
  - [React Renderers](#react-renderers)
  - [React Internationalization](#react-internationalization)
  - [React Graphics and Animations](#react-graphics-and-animations)
  - [React Integration](#react-integration)
  - [React Real Apps](#react-real-apps)
- [React Native](#react-native)
  - [React Native General Resources](#react-native-general-resources)
  - [React Native Navigation](#react-native-navigation)
  - [React Native [Awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) Components](#react-native-awesome-components)
  - [React Native Libraries](#react-native-libraries)
- [Contribution](#contribution)

### React

#### React General Resources

- [React Official Website](https://react.dev/)
- [React GitHub](https://github.com/facebook/react)
- [Reactiflux Discord Channel](http://www.reactiflux.com/)
- [React Community](https://react.dev/community)
- [React Conferences](https://react.dev/community/conferences)
- [React CodeSandbox Playground](https://codesandbox.io/s/new)

#### React Tutorials

- [React Official Tutorial](https://react.dev/learn)
- [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
- [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions)
- [Design patterns and Component patterns for building powerful Web Apps](https://www.patterns.dev/)
- [A simple, scalable, and powerful architecture for building production ready React applications](https://github.com/alan2207/bulletproof-react)
- [Cheatsheets for experienced React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)

#### React Frameworks

- [next](https://github.com/vercel/next.js) - The React Framework
- [gatsby](https://github.com/gatsbyjs/gatsby) - Build modern websites with React
- [remix](https://github.com/remix-run/remix) - Full-stack web Framework that lets you focus on the user interface
- [react-admin](https://github.com/marmelab/react-admin) - A frontend Framework for building B2B applications
- [refine](https://github.com/refinedev/refine) - Build your React-based CRUD applications, without constraints
- [vike](https://github.com/vikejs/vike) - The Modular Framework - [Next.js](/@harrisonqian/awesome/wiki/front-end-development/next-js) & Nuxt alternative

#### React Component Libraries

- [shadcn-ui](https://github.com/shadcn-ui/ui) - Beautifully designed components built using Radix UI and [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css)
- [ant-design](https://github.com/ant-design/ant-design) - An enterprise-class UI design language and React UI library
- [material-ui](https://github.com/mui/material-ui) - Ready-to-use foundational React components
- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - Component system for building SaaS products with speed
- [react-bits](https://github.com/DavidHDev/react-bits) - A collection of animated, interactive & fully customizable React components
- [mantine](https://github.com/mantinedev/mantine) - Fully featured React components library
- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React
- [fluentui](https://github.com/microsoft/fluentui) - Microsoft's Fluent UI
- [framework7](https://github.com/framework7io/framework7) - Full featured HTML framework for building iOS & [Android](/@harrisonqian/awesome/wiki/platforms/android) [apps](/@harrisonqian/awesome/wiki/platforms/apps)
- [ariakit](https://github.com/ariakit/ariakit) - Toolkit for building accessible web [apps](/@harrisonqian/awesome/wiki/platforms/apps) with React
- [react-email](https://github.com/resend/react-email) - Unstyled components for creating beautiful [emails](/@harrisonqian/awesome/wiki/front-end-development/emails)
- [8bitcn-ui](https://github.com/TheOrcDev/8bitcn-ui) - A retro 8-bit themed React component library built on top of shadcn
- [headlessui](https://github.com/tailwindlabs/headlessui) - Completely unstyled, accessible UI components for React
- [ruixen-ui](https://github.com/ruixenui/ruixen.com) - Modern, lightweight React component library with elegant design

#### React State Management and Data Fetching

- [redux](https://github.com/reduxjs/redux) - Predictable State Container for [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) [Apps](/@harrisonqian/awesome/wiki/platforms/apps)
- [mobx](https://github.com/mobxjs/mobx) - Simple, scalable state management
- [zustand](https://github.com/pmndrs/zustand) - Bear necessities for state management in React
- [tanstack-query](https://github.com/TanStack/query) - Powerful asynchronous state management
- [swr](https://github.com/vercel/swr) - [React Hooks](/@harrisonqian/awesome/wiki/front-end-development/react-hooks) for Data Fetching
- [apollo-client](https://github.com/apollographql/apollo-client) - A fully-featured, production ready caching [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) client
- [relay](https://github.com/facebook/relay) - A framework for building data-driven React applications
- [jotai](https://github.com/pmndrs/jotai) - Primitive and flexible state management for React
- [xstate](https://github.com/statelyai/xstate) - State machines and statecharts for the modern web
- [effector](https://github.com/zerobias/effector) - Business logic with ease
- [immer](https://github.com/immerjs/immer) - Create the next immutable state by mutating the current one
- [immutable-js](https://github.com/immutable-js/immutable-js) - Immutable persistent data collections for [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript)
- [rxdb](https://github.com/pubkey/rxdb) - A fast, [offline-first](/@harrisonqian/awesome/wiki/front-end-development/offline-first), reactive [database](/@harrisonqian/awesome/wiki/databases/database) for [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) Applications

#### React Styling

- [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age
- [emotion](https://github.com/emotion-js/emotion) - CSS-in-JS library designed for high performance style composition
- [vanilla-extract](https://github.com/seek-oss/vanilla-extract) - Zero-runtime Stylesheets-in-TypeScript

#### React Icon Libraries

- [react-icons](https://github.com/react-icons/react-icons) - SVG React [icons](/@harrisonqian/awesome/wiki/media/icons) of popular icon packs
- [lucide-react](https://github.com/lucide-icons/lucide) - Beautiful & consistent icon toolkit
- [heroicons](https://github.com/tailwindlabs/heroicons) - Beautiful hand-crafted SVG [icons](/@harrisonqian/awesome/wiki/media/icons) by the makers of [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css)
- [thesvg](https://github.com/GLINCKER/thesvg) - A collection of free SVG [icons](/@harrisonqian/awesome/wiki/media/icons) for popular brands and technologies

#### React Routing

- [react-router](https://github.com/remix-run/react-router) - Declarative routing for React
- [tanstack-router](https://github.com/TanStack/router) - Type-safe router with built-in caching & URL state management

#### React Development Tools

- [vite](https://github.com/vitejs/vite) - Next Generation Frontend Tooling
- [parcel](https://github.com/parcel-bundler/parcel) - The zero configuration build tool for the web
- [reactotron](https://github.com/skellock/reactotron) - A desktop app for inspecting your React and [React Native](/@harrisonqian/awesome/wiki/platforms/react-native) projects
- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for [ESLint](/@harrisonqian/awesome/wiki/programming-languages/eslint)
- [react-scan](https://github.com/aidenybai/react-scan) - Scan for React performance issues and eliminate slow renders in your app
- [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - Monkey patches React to notify you about avoidable re-renders

#### React Libraries

- [ai-sdk](https://github.com/vercel/ai) - The AI Toolkit for TypeScript and React from the creators of [Next.js](/@harrisonqian/awesome/wiki/front-end-development/next-js)
- [preact](https://github.com/preactjs/preact) - Fast React alternative with the same modern API
- [floating-ui](https://github.com/floating-ui/floating-ui) - Toolkit to create floating elements
- [loadable-components](https://github.com/gregberge/loadable-components) - The recommended Code Splitting library for React
- [react-uploady](https://github.com/rpldy/react-uploady) - Modern file-upload components & hooks for React
- [downshift](https://github.com/downshift-js/downshift) - React autocomplete, combobox or select dropdown components
- [react-error-boundary](https://github.com/bvaughn/react-error-boundary) - A React error boundary component that lets you catch errors

#### React Testing

- [jest](https://github.com/facebook/jest) - Delightful [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) [Testing](/@harrisonqian/awesome/wiki/testing/testing)
- [react-[testing](/@harrisonqian/awesome/wiki/testing/testing)-library](https://github.com/testing-library/react-testing-library) - Simple and complete React DOM [testing](/@harrisonqian/awesome/wiki/testing/testing) utilities
- [cypress](https://github.com/cypress-io/cypress) - Fast, easy and reliable [testing](/@harrisonqian/awesome/wiki/testing/testing) for anything that runs in a browser
- [playwright](https://github.com/microsoft/playwright) - A framework for Web [Testing](/@harrisonqian/awesome/wiki/testing/testing) and Automation

#### React Awesome Components

- [Awesome React Components](https://github.com/brillout/awesome-react-components)
- [react-select](https://github.com/JedWatson/react-select) - The Select Component for React
- [react-big-calendar](https://github.com/jquense/react-big-calendar) - Calendar component
- [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - A simple and reusable datepicker component for React
- [react-qrcode](https://github.com/zpao/qrcode.react) - QR component for use with React
- [react-archer](https://github.com/pierpo/react-archer) - Draw arrows between React elements
- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - Unopinionated Accessible Tree
- [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - A React component for Instagram like stories
- [react-hot-toast](https://github.com/timolins/react-hot-toast) - Lightweight and customizable toast notifications for React
- [swiper](https://github.com/nolimits4web/swiper) - Most modern mobile touch slider
- [keen-slider](https://github.com/rcbyr/keen-slider) - The Touch slider carousel
- [heart-switch](https://github.com/anatoliygatt/heart-switch) - A heart-shaped toggle switch component for React
- [kbar](https://github.com/timc1/kbar) - Fast, portable, and extensible cmd+k interface for your site
- [tagify](https://github.com/yairEO/tagify) - Lightweight, efficient Tags input component
- [puck](https://github.com/measuredco/puck) - The visual editor for React
- [json-edit-react](https://github.com/CarlosNZ/json-edit-react) - Highly configurable JSON/Object tree editor/viewer

#### React Components Sandboxes

- [storybook](https://github.com/storybookjs/storybook) - [Storybook](/@harrisonqian/awesome/wiki/front-end-development/storybook) is a frontend workshop for building UI components and pages in isolation
- [react-cosmos](https://github.com/react-cosmos/react-cosmos) - Dev tool for creating reusable React components
- [bit](https://github.com/teambit/bit) - A build system for development of composable software

#### React Forms

- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - [React Hooks](/@harrisonqian/awesome/wiki/front-end-development/react-hooks) for form state management and validation
- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) - A React component for building Web forms from [JSON](/@harrisonqian/awesome/wiki/miscellaneous/json) Schema
- [formily](https://github.com/alibaba/formily) - Alibaba Group Unified Form Solution
- [tanstack-form](https://github.com/TanStack/form) - Headless, performant, and type-safe form state management

#### React Tables and Grids

- [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints
- [tanstack-table](https://github.com/TanStack/table) - Headless UI for building powerful tables & datagrids
- [react-data-grid](https://github.com/adazzle/react-data-grid) - Feature-rich and customizable data grid React component

#### React Maps

- [react-map-gl](https://github.com/visgl/react-map-gl) - React friendly API wrapper around MapboxGL JS
- [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps

#### React Charts

- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3
- [visx](https://github.com/airbnb/visx) - Visualization components
- [victory](https://github.com/FormidableLabs/victory) - A collection of composable React components for building interactive data visualizations
- [react-vis](https://github.com/uber/react-vis) - [Data Visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) Components
- [nivo](https://github.com/plouc/nivo) - Provides a rich set of [data visualization](/@harrisonqian/awesome/wiki/miscellaneous/data-visualization) components built on top of the D3 and React libraries
- [xyflow](https://github.com/xyflow/xyflow) - A customizable React component for building node-based editors and interactive diagrams

#### React Renderers

- [react-three-fiber](https://github.com/pmndrs/react-three-fiber) - A React renderer for Three.js
- [ink](https://github.com/vadimdemedes/ink) - React for interactive command-line [apps](/@harrisonqian/awesome/wiki/platforms/apps)
- [remotion](https://github.com/remotion-dev/remotion) - Make videos programmatically with React
- [react-pdf](https://github.com/diegomura/react-pdf) - Create PDF files using React
- [react-figma](https://github.com/react-figma/react-figma) - A React renderer for Figma
- [markdown-to-jsx](https://github.com/quantizor/markdown-to-jsx) - A very fast and versatile [markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) toolchain

#### React Internationalization

- [formatjs](https://github.com/formatjs/formatjs) - Internationalize your web [apps](/@harrisonqian/awesome/wiki/platforms/apps)
- [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for React done right
- [react-intlayer](https://github.com/aymericzip/intlayer) - Internationalization focused on maintainability for React

#### React Graphics and Animations

- [react-spring](https://github.com/pmndrs/react-spring) - A spring physics based React animation library
- [framer-motion](https://github.com/framer/motion) - Open source, production-ready animation and gesture library for React
- [auto-animate](https://github.com/formkit/auto-animate) - A zero-config, drop-in animation utility that adds smooth transitions
- [react-tsparticles](https://github.com/matteobruni/tsparticles) - Easily create highly customizable particles effects
- [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - Easily apply tilt hover effect on React components
- [simple-parallax-js](https://github.com/geosigno/simpleParallax.js) - The easiest way to get a parallax effect with React and [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript)

#### React Integration

- [rescript-compiler](https://github.com/rescript-lang/rescript-compiler) - A robustly typed language that compiles to efficient and human-readable [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript)
- [fulcro](https://github.com/fulcrologic/fulcro) - A library for development of web applications in clj/cljs

#### React Real Apps

- [mattermost-server](https://github.com/mattermost/mattermost-server) - An open source platform for secure collaboration
- [kibana](https://github.com/elastic/kibana) - Your window into the Elastic Stack
- [webamp](https://github.com/captbaritone/webamp) - Winamp 2 reimplemented for the browser
- [overreacted](https://github.com/gaearon/overreacted.io) - Personal blog by Dan Abramov
- [wave](https://github.com/wavetermdev/waveterm) - An open-source, [cross-platform](/@harrisonqian/awesome/wiki/platforms/cross-platform) terminal for seamless workflows
- [readest](https://github.com/readest/readest) - A minimalistic, feature-rich and [cross-platform](/@harrisonqian/awesome/wiki/platforms/cross-platform) eBook reader
- [bookcars](https://github.com/aelassas/bookcars) - Car rental platform
- [notifuse](https://github.com/Notifuse/notifuse) - Modern self-hosted emailing platform to send newsletters & transactional [emails](/@harrisonqian/awesome/wiki/front-end-development/emails)

### React Native

#### React Native General Resources

- [React Native Official Website](https://reactnative.dev/)
- [React Native GitHub](https://github.com/facebook/react-native)
- [React Native Community](https://reactnative.dev/community/overview)
- [Expo](https://expo.dev/)

#### React Native Navigation

- [react-navigation](https://github.com/react-navigation/react-navigation) - Routing and navigation for your [React Native](/@harrisonqian/awesome/wiki/platforms/react-native) [apps](/@harrisonqian/awesome/wiki/platforms/apps)

#### React Native Awesome Components

- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) - Customizable [Icons](/@harrisonqian/awesome/wiki/media/icons) for [React Native](/@harrisonqian/awesome/wiki/platforms/react-native)
- [react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat) - The most complete chat UI for [React Native](/@harrisonqian/awesome/wiki/platforms/react-native)

#### React Native Libraries

- [realm-js](https://github.com/realm/realm-js) - A mobile [database](/@harrisonqian/awesome/wiki/databases/database): an alternative to SQLite & key-value stores
- [react-native-device-info](https://github.com/react-native-device-info/react-native-device-info) - Device Information for [React Native](/@harrisonqian/awesome/wiki/platforms/react-native) iOS and [Android](/@harrisonqian/awesome/wiki/platforms/android)
- [react-native-maps](https://github.com/react-native-maps/react-native-maps) - [React Native](/@harrisonqian/awesome/wiki/platforms/react-native) Mapview component

### Contribution

This list began as a personal compilation of interesting things related to React. When it was initiated, React was still in beta, a special script was required to convert JSX to JS, and Flux (if you know what it was) had not yet been released. Today, React has become boring mainstream. Kindly refrain from using this list as an advertisement board or a space to promote your experiments. We focus on sharing entirely free resources here. Please feel free to propose updates for outdated projects and articles, as well as new contributions. I would prefer GitHub links, please. Your input and suggestions are wholeheartedly♡ appreciated. (✿◠‿◠)

[![CC0](https://i.creativecommons.org/l/by/4.0/88x31.png)](http://creativecommons.org/licenses/by/4.0/)
