Convert Figma logo to code with AI

brillout logoawesome-react-components

Curated List of React Components & Libraries.

41,924
3,456
41,924
10
View on GitHub

Top Related Projects

enaqx's avatar

awesome-react

64,351

A collection of awesome things regarding React ecosystem

jondot's avatar

awesome-react-native

34,488

Awesome React Native components, news, tools, and learning material!

sindresorhus's avatar

awesome

323,302

😎 Awesome lists about all kinds of interesting topics

FormidableLabs's avatar

spectacle

9,742

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

react-toolbox's avatar

react-toolbox

8,657

A set of React components implementing Google's Material Design specification with the power of CSS Modules

reactjs's avatar

react-docgen

3,637

A CLI and library to extract information from React component files for documentation generation purposes.

Quick Overview

Awesome React Components is a curated list of React components and libraries. It serves as a comprehensive resource for developers looking for high-quality, reusable React components across various categories such as UI components, data visualization, forms, and more.

Pros

  • Extensive collection of React components and libraries
  • Well-organized into categories for easy navigation
  • Regularly updated with new and popular components
  • Includes both open-source and commercial options

Cons

  • Can be overwhelming due to the large number of options
  • Quality and maintenance of listed components may vary
  • Some listed components may become outdated or deprecated
  • Lacks detailed comparisons between similar components

Code Examples

As this is a curated list and not a code library itself, there are no specific code examples to provide. However, developers can find code examples and usage instructions for individual components by following the links provided in the list.

Getting Started

Since this is not a code library but a curated list, there's no specific installation or setup process. To use Awesome React Components:

  1. Visit the GitHub repository: https://github.com/brillout/awesome-react-components
  2. Browse through the categories to find components that suit your needs
  3. Click on the links to view the documentation and installation instructions for specific components
  4. Follow the instructions provided by each individual component to integrate it into your React project

Competitor Comparisons

enaqx logo

awesome-react

64,351

A collection of awesome things regarding React ecosystem

Pros of awesome-react

  • Broader scope, covering various aspects of React ecosystem beyond components
  • More comprehensive, including tutorials, tools, and learning resources
  • Regularly updated with new content and categories

Cons of awesome-react

  • Less focused on components, which may be overwhelming for developers specifically looking for component libraries
  • Potentially harder to navigate due to its extensive content
  • May include some outdated resources due to its broad coverage

Code comparison

While both repositories are curated lists and don't contain actual code, they differ in their structure. Here's a simplified example of how they organize their content:

awesome-react-components:

## UI Components
### Buttons
- [react-awesome-button](https://github.com/rcaferati/react-awesome-button) - 3D animated 60fps buttons with load progress

awesome-react:

## React Components
- [React Awesome Button](https://github.com/rcaferati/react-awesome-button) - 3D animated 60fps buttons with load progress
## Tools
- [Create React App](https://github.com/facebook/create-react-app) - Set up a modern web app by running one command

awesome-react-components focuses solely on components, organizing them by type, while awesome-react covers a wider range of topics related to React development.

jondot logo

awesome-react-native

34,488

Awesome React Native components, news, tools, and learning material!

Pros of awesome-react-native

  • Specifically tailored for React Native development, offering a more focused resource for mobile app developers
  • Includes sections on conferences, tutorials, and books, providing a broader learning ecosystem
  • Regularly updated with new resources and components

Cons of awesome-react-native

  • Limited to React Native, not covering web-based React components
  • May include fewer overall components compared to awesome-react-components
  • Some listed resources might be mobile-specific and not applicable to web development

Code Comparison

awesome-react-components:

import { Button } from 'react-bootstrap';

<Button variant="primary">Click me</Button>

awesome-react-native:

import { Button } from 'react-native';

<Button title="Click me" onPress={() => {}} />

Summary

Both repositories offer curated lists of React-related resources, but they cater to different audiences. awesome-react-components is more comprehensive for web-based React development, while awesome-react-native focuses specifically on mobile app development with React Native. The choice between them depends on the developer's target platform and specific needs.

sindresorhus logo

awesome

323,302

😎 Awesome lists about all kinds of interesting topics

Pros of awesome

  • Broader scope, covering various programming languages and technologies
  • Larger community and more frequent updates
  • More comprehensive and well-organized structure

Cons of awesome

  • Less focused on specific React components
  • May be overwhelming for developers looking for React-specific resources
  • Requires more time to navigate and find relevant information

Code comparison

Not applicable, as both repositories are curated lists of resources and don't contain significant code samples.

Key differences

awesome-react-components:

  • Focused exclusively on React components
  • Organized by component type (UI, Layout, etc.)
  • Includes direct links to component libraries and individual components

awesome:

  • Covers a wide range of programming topics
  • Organized by technology or language
  • Includes links to other awesome lists and general resources

Use cases

awesome-react-components:

  • Best for React developers looking for specific components
  • Useful when building React applications and need quick access to component libraries

awesome:

  • Ideal for developers working across multiple technologies
  • Helpful for discovering new tools and resources in various programming domains

Community and maintenance

awesome-react-components:

  • Smaller, more focused community
  • Less frequent updates

awesome:

  • Large, active community
  • Regular updates and contributions

Conclusion

Choose awesome-react-components for React-specific component resources, and awesome for a comprehensive list of programming resources across various technologies.

FormidableLabs logo

spectacle

9,742

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

Pros of Spectacle

  • Focused specifically on creating presentations with React
  • Includes built-in themes and customizable styling options
  • Offers a CLI tool for quickly bootstrapping presentation projects

Cons of Spectacle

  • Limited to presentation-related components
  • Smaller community and fewer contributors compared to awesome-react-components
  • Less frequent updates and maintenance

Code Comparison

Spectacle example:

import { Deck, Slide, Text } from 'spectacle';

const Presentation = () => (
  <Deck>
    <Slide>
      <Text>Hello, World!</Text>
    </Slide>
  </Deck>
);

awesome-react-components doesn't provide direct code examples as it's a curated list of components. Users would typically install and use individual components from the list:

import { Button } from 'some-react-component-library';

const MyComponent = () => (
  <Button onClick={() => console.log('Clicked!')}>
    Click me
  </Button>
);

Summary

Spectacle is a specialized library for creating presentations in React, offering a cohesive set of components and tools for this specific purpose. awesome-react-components, on the other hand, is a comprehensive list of various React components and libraries, covering a wide range of use cases beyond just presentations. While Spectacle provides a more focused and integrated experience for presentation creation, awesome-react-components offers greater flexibility and variety for general React development needs.

react-toolbox logo

react-toolbox

8,657

A set of React components implementing Google's Material Design specification with the power of CSS Modules

Pros of React Toolbox

  • Comprehensive set of pre-built Material Design components
  • Consistent styling and theming across all components
  • Built-in customization options and theming system

Cons of React Toolbox

  • Limited to Material Design aesthetic
  • Larger bundle size due to comprehensive component set
  • Less frequently updated compared to Awesome React Components

Code Comparison

React Toolbox:

import { Button } from 'react-toolbox/lib/button';

const MyComponent = () => (
  <Button label="Hello World" raised primary />
);

Awesome React Components (using a button from a listed library):

import { Button } from 'antd';

const MyComponent = () => (
  <Button type="primary">Hello World</Button>
);

Summary

React Toolbox provides a cohesive set of Material Design components with built-in theming, while Awesome React Components offers a curated list of various component libraries. React Toolbox is ideal for projects requiring a consistent Material Design look, but may be limiting for those seeking diverse styling options. Awesome React Components allows developers to choose from a wide range of libraries, offering more flexibility but potentially requiring more effort to maintain consistency across components from different sources.

reactjs logo

react-docgen

3,637

A CLI and library to extract information from React component files for documentation generation purposes.

Pros of react-docgen

  • Focused tool for extracting information from React components
  • Provides detailed component documentation, including props and methods
  • Integrates well with documentation generation tools

Cons of react-docgen

  • Limited to React component analysis, not a general-purpose resource
  • Requires setup and integration into the development workflow
  • May not cover all edge cases or complex component structures

Code Comparison

react-docgen:

const docgen = require('react-docgen');
const componentInfo = docgen.parse(source);
console.log(componentInfo.props);

awesome-react-components:

## UI Components

### Buttons
- [react-awesome-button](https://github.com/rcaferati/react-awesome-button) - 3D animated 60fps buttons with load progress.

Key Differences

  • react-docgen is a programmatic tool for component analysis, while awesome-react-components is a curated list of React components
  • awesome-react-components provides a broader overview of available components, whereas react-docgen focuses on in-depth component documentation
  • react-docgen is more suitable for developers building documentation systems, while awesome-react-components is useful for discovering new components

Use Cases

  • Use react-docgen when building automated documentation for your React project
  • Refer to awesome-react-components when looking for pre-built components to use in your application

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

🚀 Absolutely Awesome React Components & Libraries

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!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

See also: Awesome React Frameworks.

Maintainers:

  • @petebray, author of Fluxguard — monitor PROD website changes.
  • @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

Contributing

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY PR a new resource if you are ALSO removing one.

Table of Contents

UI Components

Back to top ⬆️

Editable data grid / spreadsheet

  • fortune-sheet - An online spreedsheet component that provides out-of-the-box features just like Excel.
  • AG Grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • gigatables-react - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more.
  • MUI X Data grid - demo/docs - Fast and customizable data grid with advanced features for power users and complex use cases.
  • react-data-grid - Excel-like grid.
  • revo-grid - demo/docs - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization.
  • ReactGrid - demo/docs - Add spreadsheet-like behavior to your app
  • jqwidgets-react-grid - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more.

Table

  • ka-table - demo - Customizable table component with sorting, filtering, grouping, virtualization, editing etc.

  • mantine-datatable - demo/docs - Lightweight table component for Mantine UI applications, with lots of features

  • material-table - demo/docs - 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 - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination

  • TanStack Table - demo - Headless UI for building powerful tables & datagrids

  • react-table-library - demo - React Table Library -- an almost headless table library -- for building better tables.

  • rsuite-table - demo/docs - A table component that supports virtualized.

  • sematable - Client side sorting, pagination, and text filter for redux/react based apps.

  • DevExtreme React Grid - High-performance plugin-based data grid for Bootstrap and Material Design.

  • Smart React Grid - Fast and feature-complete data grid with Material Design.

  • KendoReact Grid - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more.

  • Material-React-Table - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript

  • AG Grid - The Best JavaScript Grid in the World

Infinite Scroll

  • @egjs/react-infinitegrid - npm - demo - A module used to arrange card elements including content infinitely according to various layout types.
  • react-lazyload - Lazyload your Component, Image or anything else where the performance matters.
  • react-list - A versatile infinite scroll React component.
  • @af-utils/virtual - demo/docs - Render large scrollable lists and grids.
  • react-window - demo - React components for efficiently rendering large lists and tabular data
  • virtua - demo - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid.

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.
  • react-modal - Accessible modal dialog component for React.
  • reoverlay - demo - The missing solution for managing modals.
  • sweetalert2 - demo/docs - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
  • sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

Captcha

Carousel

Buttons

Collapse

Chart

Display data in charts / graphs / diagrams

Command palette

  • cmdk - Fast, composable, unstyled command menu for React.
  • kbar - demo - Fast, portable, and extensible cmd+k interface.

Tree

Display a tree data structure

  • react-arborist - demo - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search
  • react-complex-tree - demo - docs - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search
  • react-treeview - Easy, light, flexible tree view made with React.
  • he-tree-react - demo - docs - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized.

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

  • react-dailymotion - Dailymotion player component for React.
  • react-player - A react component for playing a variety of URLs, including YouTube.
  • react-soundplayer - Create custom SoundCloud players with React.
  • react-youtube - React.js powered YouTube player component.
  • 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-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.

Map

Time / Date / Age

Display time / date / age

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

  • 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.
  • react-open-doodles - Awesome free illustrations as react components.
  • react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon.
  • tabler-icons-react - A set of over 450 free MIT-licensed high-quality SVG icons.
  • Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdow source

Canvas

Sketch input using Canvas or SVG

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

Screenshot

  • html2canvas - Take screenshots of any part of your web page using Javascript.

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Emoji picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

  • coloreact - A tiny Color Picker for React.
  • react-color - Is a tiny color picker widget component for React apps.
  • react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component.
  • react-input-color - React input color component with hsv color picker.

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

Autosize Input / Textarea

Star Rating

Drag and Drop

  • react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
  • react-dnd - Drag and Drop for React.
  • react-drag-sizing - "Drag to resize" (sizing) as React Component.
  • react-draggable - React draggable component.
  • react-dragula - Drag and drop so simple it hurts.
  • react-dropzone - Simple HTML5 drag-drop zone with React.js.
  • react-movable - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables.
  • react-sortable-pane - Sortable and resizable pane component for React.
  • neodrag - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same.

Sortable List

Let the user define an order on a list

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

  • @anatoliygatt/numeric-stepper - demo - A fully themeable and accessible numeric stepper component.
  • interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
  • react-designer - Easy to configure, lightweight, editable vector graphics in your react components.
  • react-upload-gallery - React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

Syntax Highlight

UI Layout

Back to top ⬆️

Components to layout the app's UI

UI Animation

Back to top ⬆️

Animate transitions

Parallax

UI Frameworks

Back to top ⬆️

Responsive

Set of components + responsive layout system

  • AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular!
  • ant-design - demo/docs - A UI Design Language from China. Individual components available.
  • atlaskit - Atlassian's official UI library, with components from badge to tree table.
  • base web - Base Web is a foundation for initiating, evolving, and unifying web products.
  • carbon - demo/docs - A design system built by IBM.
  • cdbreact - demo - docs - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps.
  • chakra-ui - demo/docs - Simple, Modular & Accessible UI Components for your React Applications.
  • ChatUI - demo/docs - The UI design language and React library for Conversational UI
  • CoreUI for React - demo/docs - Open Source UI components library.
  • evergreen - demo/docs - Evergreen React UI Framework by Segment.
  • fluentui - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
  • geist-ui - Modern and minimalist React UI library.
  • gestalt - demo/docs - A set of components that supports Pinterest’s design language.
  • grommet - The most advanced UX framework for enterprise applications.
  • Mantine - demo/docs - A fully featured library with 100+ hooks and components with native dark theme support
  • orbit - Components for building travel oriented projects.
  • flowbite-react - Open-source UI component library based on React, Tailwind CSS, and Flowbite.
  • primereact - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes.
  • radix-ui - Unstyled, accessible components for building high‑quality design systems and web apps.
  • react-bootstrap - Bootstrap components built with React.
  • react-foundation - Foundation as React components.
  • reakit - demo/docs Toolkit for building accessible rich web apps
  • 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.
  • semi-design - demo/docs - A modern, comprehensive, flexible design system.
  • shadcn/ui - demo - docs - Beautifully designed components that you can copy and paste into your apps.
  • shineout - demo - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc.

Material Design

  • 🚀 Material UI - Full suite of components. Build your own design system, or start with Material Design.
    • Autocomplete - Accessible autocomplete, combobox, multiselect
    • Material Icons - 1,000+ SVG material icons.
    • Modal - Accessible modal dialog component.
    • Slider - Accessible slider component.
    • Table - table with sorting, selecting, pagination, virtualized.
    • Tree View - Accessible tree view component for React.
  • 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.
  • mdbootstrap - React Bootstrap with Material Design

Mobile

  • antd-mobile - Configurable Mobile UI from China.
  • Ionic React - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base.
  • OnsenUI - demo/docs - Mobile app framework with Material and flat (iOS) designs. Based on Web Components.

Component Collections

  • blueprint - demo - docs - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications.
  • dataminr-react-components - Collection of reusable React Components and utility functions.
  • shards-react - docs/demo - A beautiful and modern React design system. Freemium.
  • aframe-react - Build virtual reality experiences with A-Frame and React.
  • react-admin - Build admin user experiences on top of REST and GraphQL services.
  • refine - demo - docs - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.
  • matrix-card - demo - Simplest possible component to generate matrix rain style cards.
  • rsuite - demo/docs - Suite of components for "enterprise system products".
  • lens-ui - docs - A Suit of components focused on simplicity.

UI Utilities

Back to top ⬆️

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Set meta tags, , children of <head>

Portal

Render an element at an arbitrary DOM node

  • react-layer-stack - Simple but ubiquitously powerful and agnostic layering system for React.
  • react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body.

Test User Behavior

A/B tests, experiments, ...

Code Design

Back to top ⬆️

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

  • 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 - docs Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend
  • RxDB - demo - docs A fast, local first, reactive Database for JavaScript Applications
  • fluxible - A pluggable container for universal flux applications.
  • kea - High level architecture for React apps.
  • react-i13n - A performant, scalable and pluggable approach to instrumenting your React application.
  • react-redux - Official React bindings for Redux.
  • redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification.
  • redux - Predictable state container for JavaScript apps.
  • reselect - Selector library for Redux.
  • resourcerer - Declarative data-fetching framework for REST APIs
  • synergies - docs A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces.
  • zustand - docs - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api.
  • teaful - Tiny, easy and powerful React state management

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.
  • formsy-react - A form input builder and validator for React JS.
  • Phormal - Docs & Demos - 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-jsonschema-form - A React component for building Web forms from JSONSchema.
  • 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 - A lightweight, dependency-free solution React hooks for form validation.

Router

Props from server

Component properties asynchronously fetched over the network

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

Communication with server

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

CSS / Style

  • 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.
  • aphrodite - It's inline styles, but they work!.
  • 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.
  • 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.

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

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

  • create-react-app - Create React apps with no build configuration.
  • 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.
  • electron-react-boilerplate - Live editing development on desktop app.
  • elegant - docs - demo - 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.
  • nx - Next generation build system with first class monorepo support and powerful integrations.
  • 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.

Miscellaneous

Utilities

Back to top ⬆️

i18n

Internationalization / L10n / localization / translation

  • react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
  • react-intl - Internationalize React apps.
  • react-localized - Internationalization for React components based on gettext format.
  • react-translate-maker - Universal internationalization (i18n) open source library for React.
  • react-intl-universal - demo Internationalize React apps. Not only for React.Component but also for Vanilla JS.
  • @tolgee/react - docs – Web-based localization tool enabling users to translate directly in the React app they develop
  • js-lingui - docs – A readable, automated, and optimized (5 kb) internationalization for JavaScript.

Framework bindings / integrations

Integrations with Third Party Services

Performance

Back to top ⬆️

UI

Inspect

Lazy Load

  • react-infinite-grid - A React component which renders a grid of elements.
  • react-infinite - A browser-ready efficient scrolling container based on UITableView.
  • react-lazy-load - React component that renders children elements when they enter the viewport.
  • react-lazyload - Lazyload your Component, Image or anything matters the performance.
  • react-virtualized - React components for efficiently rendering large lists and tabular data.

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

Dev Tools

Back to top ⬆️

Test

  • 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.
  • 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.
  • playwright enables reliable end-to-end testing for modern web apps.

Redux

Inspect

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

Miscellaneous

Miscellaneous

Back to top ⬆️

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

Cloud Solutions

Back to top ⬆️

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.