Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

awesome-react-components

Curated List of React Components & Libraries.
https://github.com/eric-erki/awesome-react-components

Last synced: 1 day ago
JSON representation

  • Uncategorized

    • Uncategorized

      • @brillout - api) — create an RPC-like API as an alternative to REST and GraphQL.
      • @petebray

  • UI Components

    • Loader

    • Chart

      • essential js 2 charts - Beautiful and interactive charts & graphs for react.
      • reaviz - ReactJS Data Visualization Library based on D3.js
      • semiotic - Semiotic is a data visualization framework for React
      • react-chartist - React component for Chartist.js.
      • react-charty - [demo](https://99ff00.github.io/react-charty/) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming.
      • react-d3-components - D3 Components for React.
      • react-dazzle - Dashboards made easy in React JS.
      • react-google-charts - React-google-charts React component.
      • react-highcharts - React-highcharts.
      • react-sigmajs - Lightweight but powerful library for drawing network graphs built on top of SigmaJS.
      • react-sparkline - React component for rendering simple sparklines.
      • react-sparklines - Beautiful and expressive Sparklines React component.
      • react-timeseries-charts - Declarative timeseries charts.
      • react-trend - Simple, elegant spark lines.
      • react-vis - Data visualization library based on React and d3.
      • recharts - Redefined chart library built with React and D3.
      • rumble-charts - React components for building composable and flexible charts.
      • victory - Data viz for React.
      • chartify - React.js plugin for building animated draggable and customizable charts.
      • react-chartjs-2 - Common react charting components using Chart.js 2.0.

    • Form Components

    • Editable data grid / spreadsheet

      • gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
      • react-data-grid - Excel-like grid.
      • ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.

    • Table

      • griddle-react - Simple grid component that can display data as a table, a list of cards, or on the map.
      • material-table - [demo/docs](https://material-table.com/) - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing
      • mui-datatables - Built on Material-UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows.
      • react-data-table - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination
      • react-pivot - Data-grid component with pivot-table-like for data display, filtering, and exploration.
      • rsuite-table - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized.
      • sematable - Client side sorting, pagination, and text filter for redux/react based apps.
      • react-table - [demo](https://github.com/tannerlinsley/react-table/blob/master/docs/examples.md) - Hooks for building fast and extendable tables and datagrids
      • ka-table - [demo](https://komarovalexander.github.io/ka-table/#/command-column) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc. 🆕

    • Infinite Scroll

      • react-recycled-scrolling - [npm](https://www.npmjs.com/package/react-recycled-scrolling) - [demo](https://y8mlf.csb.app/) - Simulate scrolling using fixed number of DOM elements for large lists with React Hooks
      • react-list - A versatile infinite scroll React component.

    • Overlay

      • boron - A collection of dialog animations with React.js.
      • modali - A delightful modal dialog component, built from the ground up to support React Hooks.
      • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
      • react-dock - Resizable dockable react component.
      • react-modal - Accessible modal dialog component for React.
      • react-skylight - A react component for modals and dialogs.

    • Notification

      • react-notifications-component - [demo](https://teodosii.github.io/react-notifications-component/) - Highly customizable and easy-to-use component for notifications.
      • react-notification - Snackbar notifications for React.
      • react-toastify - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs.
      • react-toast-notifications - [demo](https://jossmac.github.io/react-toast-notifications/) - pleasing toast system.
      • reapop - A React & Redux notifications system.
      • react-snackbar-alert - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API.
      • simple-react-notifications - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip).
      • cogo-toast - [demo/docs](https://cogoport.github.io/cogo-toast) - Plug and play, Promise support, inbuilt styling, ~3.5K. _(No refs / provider needed 😊)_

    • Tooltip

    • Menu

    • Sticky

    • Tabs

    • Buttons

      • react-awesome-button - [demo](https://caferati.me/demo/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions.

    • Collapse

    • Tree

    • Custom Scrollbar

      • react-custom-scroll - [demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) - Easily customize the browser scroll bar with native OS scroll behavior.
      • react-scrollbar - Scrollbar component for React.
      • react-shadow-scroll - Component that customizes the image and inserts shadow when scrolling exists.

    • Audio / Video

    • Map

    • Time / Date / Age

      • react-timeago - A simple time-ago component for ReactJs.
      • timeago-react - Format date with `*** time ago` statement. eg: '3 hours ago'.

    • Photo / Image

    • Icons

      • iconify-react - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets.
      • react-icons - Svg react icons of popular icon packs using ES6 imports.

    • Paginator

    • Miscellaneous

      • material-color-hash - Hash strings to Material UI colors.
      • react-awesome-query-builder - [demo](https://ukrbublik.github.io/react-awesome-query-builder/) - Visual query builder from form fields, with SQL, MongoDB and JSON export
      • react-blur - React component for blurred backgrounds.
      • react-simple-chatbot - [demo](https://github.com/anishagg17/PIzzaBuilder) - A simple chatbot component to create conversation chats.
      • react-file-reader-input - File input component for control for file reading styling and abstraction.
      • react-filter-control - The React filterbuilder component for building the filter criteria in the UI.
      • react-joyride - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!.
      • react-json-tree - React JSON Viewer Component, Extracted from redux-devtools.
      • react-split-pane - React split-pane component.
      • react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does.
      • typography - A powerful toolkit for building websites with beautiful typography.
      • react-avatar - Universal React avatar component makes it possible to generate avatars based on user information.
      • react-facebook - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post.
      • react-avatar-generator - Allows users to create random kaleidoscopes to be used as avatars.
      • react-pdf-viewer - [docs](https://react-pdf-viewer.dev) - A React component to view a PDF document.
      • react-resizable-and-movable - Resizable and movable component for React.
      • react-resizable-box - Resizable component for React. #reactjs.

    • Markdown Viewer

  • UI Animation

  • UI Frameworks

    • Responsive

      • atlaskit - Atlassian's official UI library, with components from _badge_ to _tree table_.
      • ant-design - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available.
      • belle - Configurable React Components with great UX.
      • carbon - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM.
      • chakra-ui - [demo/docs](https://chakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications.
      • evergreen - [demo/docs](https://evergreen.segment.com) - Evergreen React UI Framework by Segment.
      • grommet - The most advanced UX framework for enterprise applications.
      • gestalt - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language.
      • pivotal-ui-react - React components based on a custom version of the Bootstrap library.
      • primereact - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
      • react-bootstrap - Bootstrap components built with React.
      • react-foundation-apps - Foundation Apps components built with React.
      • searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
      • semantic-ui-react - The official Semantic-UI-React integration.
      • shineout - [demo](https://shine.wiki/1.4.x/en/components/GetStart) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.
      • react-essence - Essence - The Essential Material Design Framework.
      • react-materialize - Material design for react, powered by materializecss.
      • react-toolbox - A set of React components implementing Google's Material Design.
      • fluent-ui - [demo/docs](https://fluent-ui.com/) - 🌈 React components that inspired by Microsoft's Fluent Design System.
      • Material-UI - Full suite of components. Build your own design system, or start with Material Design.
      • office-ui-fabric-react - React components for building Microsoft web experiences.
      • react-foundation - Foundation as React components.
      • reakit - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps
      • rebass - Configurable React Stateless Functional UI Components.

    • Component Collections

      • dataminr-react-components - Collection of reusable React Components and utility functions.
      • blueprint - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
      • react-admin - Build admin user experiences on top of REST and GraphQL services.
      • react-desktop - React UI Components for macOS Sierra and Windows 10.
      • react-stack-cards - Collection of stack card effects for galleries and preview grids.
      • rsuite - [demo/docs](https://rsuitejs.com/) - Suite of components for "enterprise system products".
      • shards-react - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium 💰
      • aframe-react - Build virtual reality experiences with A-Frame and React.

    • Mobile

      • antd-mobile - Configurable Mobile UI from China.
      • OnsenUI - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

  • Code Design

    • Data Store

      • react-redux-provide - Bridges the gap between Redux and the declarative nature of GraphQL/Relay.
      • react-storage-hoc - [demo](https://codesandbox.io/s/c0hxj?module=/src/App.js) - Higher-order components for working with localStorage and sessionStorage.
      • alt - Isomorphic flux implementation.
      • baobab-react - React integration for Baobab.
      • cerebral - A state controller with its own debugger.
      • 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.
      • fluorine-lib - Reactive state and side effect management for React using a single stream of actions.
      • kea - High level architecture for React apps.
      • react-redux - Official React bindings for Redux.
      • redux - Predictable state container for JavaScript apps.
      • reselect - Selector library for Redux.
      • resourcerer - Declarative data-fetching framework for REST APIs

    • Form Logic

      • formik - Build forms without tears and supports Validation in ease.
      • react-hook-form - React hooks for form validation without the hassle.
      • 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
      • tcomb-form - Forms library for react.
      • winterfell - Generate complex, validated and extendable JSON-based forms in React.
      • formsy-react - A form input builder and validator for React JS.
      • react-jsonschema-form - A React component for building Web forms from JSONSchema.

    • CSS / Style

      • styled-components - Visual primitives for the component age.
      • aphrodite - It's inline styles, but they work!.
      • classnames - A simple javascript utility for conditionally joining classNames together.
      • 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.
      • 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.
      • 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.

    • Router

    • 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.
      • redux-async-connect - Request async data, store in redux state, and connect to your component.

    • Communication with server

    • HTML Template

    • Isomorphic Apps

    • Boilerplate

    • Miscellaneous

      • 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.
      • react-inlinesvg - An SVG loader component for ReactJS.

  • Utilities

    • Integrations with Third Party Services

    • Miscellaneous

    • i18n

      • react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
      • react-intl-universal - [demo](https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html) Internationalize React apps. Not only for React.Component but also for Vanilla JS.
      • js-lingui - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript.
      • react-translate-maker - Universal internationalization (i18n) open source library for React.
      • react-intl - Internationalize React apps.

    • Framework bindings / integrations

  • Dev Tools

    • Test

      • redux-ava - Write AVA tests for redux pretty quickly.
      • 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.
      • ui-harness - Create, isolate and test modular UI components in React.
      • 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.
      • enzyme - JavaScript Testing utilities for React.
      • jest-cli - Painless JavaScript Testing.

    • Redux

    • Inspect

    • Miscellaneous

      • mighty-react-snippets - Crafty React and Redux ES6 snippets for Atom Editor.
      • react-atellier - The smartest way to share interactive components with your team.
      • react-heatpack - A 'heatpack' command for quick React development with webpack hot reloading.
      • cosmos-js - DX tool for designing truly encapsulated React components.
      • react-styleguidist - React style guide generator.
      • standard-react - JavaScript Standard Style Guide.
      • story-tab - [demo](https://mkosir.github.io/story-tab) - CLI tool for generating component code as documentation in Storybook tab.

  • Performance

  • UI Layout

    • Form Components

      • flexbox-react
      • m-react-splitters - Splitter component, written in TypeScript.
      • muuri-react - [demo](https://codesandbox.io/s/muuri-react-pqtbx) - Responsive, sortable, filterable and draggable grid layouts *([Muuri](https://github.com/haltu/muuri) implementation)*.
      • react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules.
      • react-masonry-component - Wrapper for @desandro's Masonry.
      • react-reflex - Flex layout container component for advanced React web applications.
      • react-spaces - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components.
      • react-stack-grid - Pinterest like layout components.
      • react-stonecutter - Animated grid layout component.
      • autoresponsive-react - Auto responsive grid layout library.
      • golden-layout - A multi-screen JavaScript Layout manager.
      • hedron - A no-frills flexbox grid system, powered by styled-components.
      • react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  • UI Utilities

  • Miscellaneous

    • Miscellaneous

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

    • Static Website Generator

      • gatsby - Transform plain text into dynamic blogs and websites using React.js.
      • phenomic - Modern static\* website generator based on the React and Webpack ecosystem.
Programming Languages
JavaScript 288 TypeScript 93 CSS 4 CoffeeScript 3 Elm 1 Ruby 1 Rust 1 MDX 1 LiveScript 1 SCSS 1
Categories
UI Components 210 Code Design 97 UI Frameworks 34 Utilities 29 Dev Tools 27 UI Utilities 24 UI Animation 20 Performance 15 UI Layout 13 Miscellaneous 7 Uncategorized 2
Sub Categories
Form Components 112 Miscellaneous 41 Responsive 24 Data Store 21 Chart 20 Boilerplate 17 Framework bindings / integrations 13 UI 12 Form Logic 12 CSS / Style 10 Test 10 Loader 9 Router 9 Table 9 Device Input 8 Notification 8 Component Collections 8 Reporter 8 Photo / Image 7 Props from server 7 Carousel 7 Redux 7 Audio / Video 6 Overlay 6 Isomorphic Apps 6 Communication with server 6 Map 6 Integrations with Third Party Services 5 i18n 5 Menu 4 Inspect 3 Custom Scrollbar 3 Sticky 3 Tree 3 Portal 3 HTML Template 3 Meta Tags 3 Editable data grid / spreadsheet 3 Tooltip 2 Mobile 2 Time / Date / Age 2 Uncategorized 2 Paginator 2 Icons 2 Static Website Generator 2 App Size 2 UI Navigation 2 Test User Behavior 2 Infinite Scroll 2 Tabs 2 Collapse 2 Parallax 2 Markdown Viewer 1 Server-Side Rendering 1 Buttons 1
Keywords
react 208 javascript 60 reactjs 40 react-component 30 react-components 28 typescript 20 component 17 redux 14 ui 14 grid 10 components 9 web 9 table 9 css 8 graphql 7 ui-components 7 chart 7 webpack 7 forms 7 nodejs 6 design-system 6 animation 6 carousel 6 d3 6 drag-and-drop 6 react-native 6 form 6 ssr 6 isomorphic 5 json 5 datepicker 5 autocomplete 5 relay 5 react-hooks 5 material-ui 5 charts 5 babel 5 sortable 5 svg 5 notifications 5 datagrid 5 router 5 i18n 5 datatable 5 sorting 4 jsx 4 bootstrap 4 layout 4 validation 4 css-in-js 4