Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

awesome-react-components

🚀 Curated Collection of Exceptional React Components & Libraries
https://github.com/saidee-hasan/awesome-react-components

Last synced: 13 days ago
JSON representation

  • Cloud Solutions

    • Databases

      • BCMS - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next.
      • crisp-bigquery - Full stack Google BigQuery with Express in TypeScript.
      • react-server-routing-example - Universal client/server routing and data with AWS DynamoDB.

  • Code Design

    • Boilerplate

      • crisp-react - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
      • cra-template-redux-auth-starter - A Redux auth starter boilerplate for CRA.
      • elegant - [docs](https://www.elegantframework.com/docs/installation) - [demo](https://www.elegantframework.com/) - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading.
      • extensive-react-boilerplate - Boilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI.
      • generator-starhackit - Full-stack starter kit.
      • nwb - CLI tool and devDependency for React apps & components and npm modules.
      • PBandJ - Zero-Config Reusable Component Framework.
      • react-hot-boilerplate - Minimal live-editing boilerplate for your next ReactJS project.
      • rockpack - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes.
      • create-react-dependency - Create react dependencies with no build configuration.
      • phoenix - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
      • react-enterprise-starter-kit - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase.
      • create-react-app - Create React apps with no build configuration.
      • electron-react-boilerplate - Live editing development on desktop app.

    • Communication with server

      • react-relay - Relay is a JavaScript framework for building data-driven React applications.
      • query - [docs](https://tanstack.com/query/v4) Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
      • apollo-client - A simple caching client for any GraphQL server and UI framework.

    • CSS / Style

      • aphrodite - It's inline styles, but they work!.
      • reactponsive - Responsive components and hooks.
      • styled-components - Visual primitives for the component age.
      • stitches - CSS-in-JS with near-zero runtime, SSR, multi-variant support.
      • inline-style-prefixer - Run-time Autoprefixer for Inline Style Objects.
      • react-container-query - Modular responsive component.
      • react-responsive - Media queries in react for responsive design.
      • aesthetic - A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names.

    • Data Store

      • baobab-react - React integration for Baobab.
      • cerebral - A state controller with its own debugger.
      • effector-react - React bindings for effector, an effective multi-store state manager.
      • fireproof - [demo](https://fireproof.storage/try-free/) - [docs](https://use-fireproof.com/docs/welcome) Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend
      • RxDB - [demo](https://github.com/pubkey/rxdb/tree/master/examples/react) - [docs](https://rxdb.info/quickstart.html) A fast, local first, reactive Database for JavaScript Applications
      • fluxible - A pluggable container for universal flux applications.
      • react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
      • redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification.
      • synergies - [docs](https://synergies.js.org) A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.
      • zustand - [docs](https://github.com/pmndrs/zustand) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
      • teaful - Tiny, easy and powerful React state management
      • reselect - Selector library for Redux.
      • kea - High level architecture for React apps.
      • resourcerer - Declarative data-fetching framework for REST APIs
      • react-redux - Official React bindings for Redux.
      • redux - Predictable state container for JavaScript apps.

    • Form Logic

      • data-driven-forms - A declarative way for building forms with all the functionality.
      • formik - Build forms without tears and supports Validation in ease.
      • Phormal - [Docs & Demos](https://phormal.dev/getting-started/react) - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages.
      • react-hook-form - React hooks for form validation without the hassle.
      • react-client-validation - Simple and super lightweight validation for React.
      • react-final-form - Subscription-based form state management
      • react-formawesome - Complex library for creating awesome forms.
      • surveyjs - The advanced Survey and Form library
      • Formily - High performance, extensible, and Typescript friendly
      • hook-form-react - [docs](https://luoanb.github.io/hook-form-react) - A lightweight, dependency-free solution React hooks for form validation.
      • formsy-react - A form input builder and validator for React JS.
      • react-jsonschema-form - A React component for building Web forms from JSONSchema.

    • HTML Template

    • Isomorphic Apps

      • hypernova - A service for server-side rendering your JavaScript views.
      • isomorphic-style-loader - Isomorphic CSS style loader for Webpack.
      • react-server - React framework with server render for blazing fast page load.
      • rill - Universal web application framework.
      • webpack-isomorphic-tools - Server-side rendering for your Webpack-built applications (e.g. React).

    • Miscellaneous

      • react-godfather - A new way to write Functional Components, without Hooks.
      • redux-auth-patch - Complete token authentication system for react + redux that supports isomorphic rendering.
      • tcomb-react - Alternative syntax for PropTypes.
      • react-universal-hooks - :tada: support react hooks everywhere (Functional or Class Component).
      • redux-search - Redux bindings for client-side search.

    • Props from server

      • react-refetch - A simple, declarative, and composable way to fetch data for React components.
      • redux-connect - Provides decorator for resolving async props in react-router.
      • axios-react - HTTP client component for React.

    • Router

  • Dev Tools

  • Miscellaneous

    • Miscellaneous

      • DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page.
      • html-to-react-components - Extract annotated portions of HTML into React components as separate modules.
      • htmltojsx - Automatically AJAXify plain HTML with the power of React. It's magic!.
      • jsonx - React JSON Syntax.
      • mozaik - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.
      • react-blessed - A react renderer for blessed.
      • jsondiffpatch-react - JSON diffing.
      • iron-session - Secure, stateless, and cookie-based session library.

    • Static Website Generator

      • gatsby - Transform plain text into dynamic blogs and websites using React.js.

  • Performance

    • App Size

    • Server-Side Rendering

      • iSSR - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
      • react-esi - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments

    • UI

  • UI Animation

    • Form Components

      • data-driven-motion - Easily animate your data.
      • react-animatable - An animation library using Web Animations API.
      • react-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
      • react-gsap-enhancer - Use the full power of React and GSAP together.
      • react-tsparticles - A lightweight component to easily create interactive particles animations
      • react-motion - A spring that solves your animation problems.
      • react-mt-svg-lines - Wrapper to animate the line stroke in SVGs.
      • react-router-transition - Transitions built for react-router, powered by react-motion.
      • react-ts-typewriter - [demo](https://codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text.
      • react-spark-scroll - Scroll-based actions and animations for react.
      • react-track - Track the position of DOM elements. Create cool animations.
      • react-transitive-number - Apply transition effect to numeric strings, a la old Groupon timers.
      • react-web-animation - React components for the Web Animations API -.
      • auto-size-transition - A component that scale dynamically according to the internal children size
      • react-particles-bg - Particles backgrounds.
      • gooey-react - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs.
      • react-voodoo - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc
      • react-anime - A super easy animation library.
      • react-spring - A spring physics based animation library.
      • framer-motion - An animation and gesture library.

    • Parallax

      • simple-parallax-js - [demo](https://simpleparallax.com) - The easiest way to get a parallax effect with React and JavaScript on images
      • react-parallax-tilt - [demo](https://mkosir.github.io/react-parallax-tilt) - Easily apply parallax tilt hover effect on components.

  • UI Components

    • Audio / Video

      • react-dailymotion - Dailymotion player component for React.
      • react-player - A react component for playing a variety of URLs, including YouTube.
      • video-react - A web video player built for the HTML5 world using React library.
      • material-ui-audio-player - Audio player for material ui design.
      • react-vision-camera - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.
      • react-youtube - React.js powered YouTube player component.
      • react-barcode-qrcode-scanner - Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes.
      • react-soundplayer - Create custom SoundCloud players with React.

    • Buttons

      • react-awesome-button - [demo](https://caferati.me/demo/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions.
      • reactive-button - [demo](https://arifszn.github.io/reactive-button/docs/playground) - [docs](https://arifszn.github.io/reactive-button) - A beautiful animated button component with progress indicator.

    • Canvas

      • react-konva - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework.
      • react-sketch - A Sketch tool for React based applications, backed-up by FabricJS
      • react-sketch-canvas - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets
      • react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.

    • Captcha

      • react-simple-captcha - [npm](https://www.npmjs.com/package/react-simple-captcha) - [demo](https://www.scriptse.com/blog/add-captcha-in-reactjs-application/react-simple-captcha-demo/) - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS.
      • procaptcha - [demo](https://prosopo.io/) - [docs](https://docs.prosopo.io/) - Privacy focused free CAPTCHA
      • react-awesome-slider - [demo](https://fullpage.caferati.me/) - Fullpage, 3D animated, 60fps media and content slider/carousel.
      • pure-react-carousel - Built from scratch and not highly opinionated.
      • react-id-swiper - A library to use idangerous Swiper as a ReactJs component
      • react-instagram-zoom-slider - [demo](https://skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram.
      • react-responsive-carousel - React.js Responsive Carousel (with Swipe).
      • react-slick - React carousel component.
      • keen-slider - [demo](https://keen-slider.io/examples/#examples) - Performant carousel/slider with native touch/swipe behavior.
      • swiper - [demo](https://swiperjs.com/demos) - [docs](https://swiperjs.com/react) - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
      • @egjs/react-flicking - [npm](https://www.npmjs.com/package/@egjs/react-flicking) - [demo](https://naver.github.io/egjs-flicking/) - It's reliable, flexible and extendable carousel.

    • Chart

    • Collapse

      • react-accessible-accordion - Accessible Accordion component for React.
      • react-collapse - Component-wrapper for collapse animation with react-motion.
      • react-tabbordion - [demo](https://merri.github.io/react-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs.
Programming Languages
JavaScript 226 TypeScript 210 HTML 3 SCSS 2 CSS 2 Java 1 CoffeeScript 1 MDX 1 Rust 1 Ruby 1
Categories
UI Components 277 Code Design 74 UI Frameworks 49 Utilities 36 Dev Tools 26 UI Utilities 22 UI Animation 22 Performance 14 UI Layout 12 Miscellaneous 9 Cloud Solutions 3 Uncategorized 2
Sub Categories
Form Components 132 Miscellaneous 56 Responsive 37 Chart 24 Data Store 16 Framework bindings / integrations 15 Boilerplate 14 Table 13 Form Logic 12 Photo / Image 11 UI 10 Carousel 9 Notification 9 Component Collections 9 Reporter 9 Device Input 8 Audio / Video 8 Integrations with Third Party Services 8 CSS / Style 8 Test 8 Redux 7 i18n 7 Router 7 Editable data grid / spreadsheet 7 Map 6 Infinite Scroll 5 Overlay 5 Isomorphic Apps 5 Icons 5 Menu 5 Loader 5 Canvas 4 Paginator 4 Tree 4 Inspect 3 Communication with server 3 Mobile 3 Custom Scrollbar 3 Time / Date / Age 3 Databases 3 Collapse 3 Props from server 3 Parallax 2 Sticky 2 App Size 2 Uncategorized 2 Server-Side Rendering 2 UI Navigation 2 Portal 2 Buttons 2 Meta Tags 2 Captcha 2 Command palette 2 Tabs 2 HTML Template 1 Screenshot 1 Markdown Viewer 1 Test User Behavior 1 Tooltip 1 Static Website Generator 1
Keywords
react 284 javascript 74 reactjs 63 typescript 51 react-component 48 react-components 34 component 29 ui 16 svg 14 css 14 components 13 vue 12 react-hooks 12 editor 11 grid 11 redux 11 react-native 11 hooks 11 table 10 animation 10 ui-components 10 mobile 9 ssr 9 drag-and-drop 9 design-system 9 nextjs 9 nodejs 8 datagrid 8 forms 8 performance 8 angular 8 chart 8 accessible 8 web 8 hook 7 webpack 7 state-management 7 carousel 7 bootstrap 7 calendar 7 preact 7 charts 7 form 7 visualization 6 router 6 material-ui 6 ant-design 6 a11y 6 dark-mode 6 datatable 6