Data

Tools

Indexes

Applications

Experiments

Awesome

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

awesome-react-components

This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well: It solves a real problem It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.) It has recent code commits!
https://github.com/mohamed-yamani/awesome-react-components

Last synced: 13 days ago
JSON representation

  • Cloud Solutions

  • Code Design

    • Boilerplate

    • Communication with server

      • adrenaline - Simple Relay alternative.
      • react-relay - Relay is a JavaScript framework for building data-driven React applications.
      • apollo-client - A simple caching client for any GraphQL server and UI framework.

    • CSS / Style

      • styled-components - Visual primitives for the component age.
      • aphrodite - It's inline styles, but they work!.
      • radium - A set of tools to manage inline styles on React elements.
      • react-css-modules - Seamless mapping of class names to CSS modules inside of React components.
      • reactponsive - Responsive components and hooks.
      • 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.
      • paperclip - [docs](https://paperclip.dev/docs/) - Build UI primitivites with plain HTML & CSS.
      • 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

      • zustand - [docs](https://github.com/pmndrs/zustand) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
      • alt - Isomorphic flux implementation.
      • 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.
      • fluxible - A pluggable container for universal flux applications.
      • fluxxor - Flux architecture tools for React.
      • mobx-react - React bindings for MobX. Create fully reactive components.
      • react-3ducks - [demo](https://stackblitz.com/github/smakazmi/react-3ducks/tree/master/examples/todos) - Simple state management solution for React.
      • react-controllables - Easily create controllable components.
      • 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.
      • redux-batched-subscribe - Store enhancer for which allows batching subscribe notifications.
      • reflux - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.
      • shasta - Dead simple + opinionated toolkit for building redux/react applications.
      • teaful - Tiny, easy and powerful React state management
      • fluorine-lib - Reactive state and side effect management for React using a single stream of actions.
      • reselect - Selector library for Redux.
      • kea - High level architecture for React apps.
      • resourcerer - Declarative data-fetching framework for REST APIs
      • react-redux-provide - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
      • react-redux - Official React bindings for Redux.
      • redux - Predictable state container for JavaScript apps.

    • Form Logic

      • formik - Build forms without tears and supports Validation in ease.
      • react-hook-form - React hooks for form validation without the hassle.
      • data-driven-forms - A declarative way for building forms with all the functionality.
      • formcat - A simple and easy way to control forms in React using the React Context API
      • plexus-form - A dynamic form component for react using JSON-Schema.
      • react-validation-mixin - Simple validation mixin (HoC) 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
      • 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

    • 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.
      • react-find - ⚛️ Elegant, accessible search component for React.

    • Props from server

      • react-async - Asynchronously fetch data for React components.
      • react-refetch - A simple, declarative, and composable way to fetch data for React components.
      • react-resolver - Async rendering & data-fetching for universal React applications.
      • react-router-relay - Relay integration for React Router.
      • redial - Universal data fetching and route lifecycle management for React etc.
      • redux-connect - Provides decorator for resolving async props in react-router.
      • axios-react - HTTP client component for React.
      • redux-async-connect - Request async data, store in redux state, and connect to your component.

    • Router

      • react-router-component - Declarative router component for React.
      • react-router-scroll - React Router scroll management.
      • redux-first-history - Redux First History - Redux history binding support react-router - @reach/router - wouter
      • redux-router - Redux bindings for React Router – keep your router state inside your Redux store.
      • universal-router - A simple middleware-style router for isomorphic JavaScript web apps.
      • wouter - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks.
      • react-breadcrumbs - Automatic breadcrumbs for React-Router.
      • react-router - A complete routing library for React.

  • Dev Tools

    • Inspect

      • react-json-inspector - React JSON inspector component.
      • fluxguard - PROD change monitoring that highlights all DOM + design changes.
      • reactotron - A CLI and OS X app for inspecting your React JS and React Native apps.

    • Miscellaneous

      • Plasmic - Powerful design tool for building your React components visually.
      • component-controls - [demo](https://component-controls.com) - [docs](https://component-controls.com/tutorial) - A next-generation tool to create blazing-fast documentation sites.
      • react-heatpack - A 'heatpack' command for quick React development with webpack hot reloading.
      • SimpleLocalize - Open source CLI tool for finding i18n keys in React projects.
      • standard-react - JavaScript Standard Style Guide.
      • cosmos-js - DX tool for designing truly encapsulated React components.
      • react-styleguidist - React style guide generator.
      • react-demo-tab-cli - CLI tool for creating demos of react components.

    • Redux

    • Test

      • carte-blanche - An isolated development space with integrated fuzz testing for your components.
      • react-unit - Lightweight unit test library for ReactJS.
      • redux-test-recorder - A redux middleware to automatically generate tests for reducers through ui interaction.
      • rut - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers.
      • unexpected-react - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer.
      • chai-enzyme - Chai.js assertions and convenience functions for testing React Components with enzyme.
      • jest-cli - Painless JavaScript Testing.
      • enzyme - JavaScript Testing utilities for React.

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

    • 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

      • react-tsparticles - A lightweight component to easily create interactive particles animations
      • react-tweenful - [demo](https://teodosii.github.io/react-tweenful/) - Animation engine that lets you animate DOM nodes, mounting, unmounting, child changes/transitions.
      • data-driven-motion - Easily animate your data.
      • 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-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-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
      • velocity-react - Velocity.js wrapper.
      • react-anime - A super easy animation library.
      • react-spring - A spring physics based animation library.
      • framer-motion - An animation and gesture library.

    • Parallax

      • react-parallax-component - Easiest way to add scroll parallax effect on the component.
      • react-parallax-tilt - [demo](https://mkosir.github.io/react-parallax-tilt) - Easily apply parallax tilt hover effect on components.

  • UI Components

    • Audio / Video

    • 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.
      • react-awesome-slider - [demo](https://caferati.me/demo/react-awesome-slider) - 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.
      • react-image-magnify - [demo](https://ethanselzer.github.io/react-image-magnify/#/external) - Responsive React image carousel zoom component for touch and mouse. Designed for shopping site product detail
      • 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

Programming Languages
JavaScript 279 TypeScript 159 HTML 2 SCSS 2 CSS 2 Java 1 CoffeeScript 1 Rust 1 Ruby 1
Categories
UI Components 263 Code Design 100 UI Frameworks 42 Utilities 34 Dev Tools 26 UI Utilities 25 UI Animation 22 Performance 14 UI Layout 12 Miscellaneous 8 Uncategorized 3 Cloud Solutions 2
Sub Categories
Form Components 132 Miscellaneous 53 Responsive 30 Data Store 23 Chart 22 Boilerplate 22 Framework bindings / integrations 15 Form Logic 12 Table 11 Carousel 10 UI 10 CSS / Style 10 Photo / Image 10 Notification 9 Component Collections 9 Reporter 9 Router 8 Props from server 8 Test 8 Device Input 8 Redux 7 Integrations with Third Party Services 7 i18n 7 Map 7 Overlay 7 Loader 6 Audio / Video 6 Isomorphic Apps 6 Editable data grid / spreadsheet 5 Paginator 4 Icons 4 Menu 4 Canvas 4 Meta Tags 4 Infinite Scroll 4 Uncategorized 3 Time / Date / Age 3 Mobile 3 Communication with server 3 Inspect 3 Custom Scrollbar 3 Sticky 3 Tree 3 Collapse 3 Parallax 2 Portal 2 HTML Template 2 Tabs 2 Test User Behavior 2 Buttons 2 UI Navigation 2 Server-Side Rendering 2 Databases 2 App Size 2 Markdown Viewer 1 Static Website Generator 1 Tooltip 1
Keywords
react 260 javascript 64 reactjs 54 react-component 39 react-components 34 typescript 34 component 24 redux 14 ui 12 editor 11 css 11 react-hooks 11 svg 10 grid 10 react-native 10 ui-components 10 table 10 drag-and-drop 9 components 9 hooks 9 ssr 8 chart 8 animation 8 vue 8 webpack 8 babel 7 angular 7 performance 7 calendar 7 design-system 7 mobile 7 carousel 7 nodejs 7 form 7 notifications 7 forms 7 toast 6 accessible 6 charts 6 state-management 6 web 6 router 6 ant-design 6 boilerplate 6 bootstrap 6 graphql 5 preact 5 touch 5 sortable 5 material-ui 5