Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

react-frontend-toolkit

A curated list of essential libraries and tools for frontend developers, with a focus on React. Ideal for developers looking to build robust, scalable, and high-performance applications 🚀.
https://github.com/drbarzaga/react-frontend-toolkit

Last synced: about 2 hours ago
JSON representation

🧰 React Frontend Toolkit
- Drag & Drop
  - Swapy - agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.
  - DnDKit
  - React Beautiful DnD - and-drop library for lists with React.
  - SortableJS - and-drop lists.
  - React Dragula - and-drop library for React based on Dragula.
  - Swapy - agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.
  - DnDKit
  - React Beautiful DnD - and-drop library for lists with React.
  - SortableJS - and-drop lists.
  - React Dragula - and-drop library for React based on Dragula.
  - React Complex Tree - Select and Drag-And-Drop.
  - React Complex Tree - Select and Drag-And-Drop.
- 📢 Share
  - ![LinkedIn - frontend-toolkit&title=React%20Toolkit%20Collection&summary=Check%20out%20this%20awesome%20React%20toolkit%20collection!&source=LinkedIn)
  - ![Reddit - frontend-toolkit&title=React%20Toolkit%20Collection)
  - ![Twitter - frontend-toolkit)
  - ![Facebook - frontend-toolkit)
  - ![LinkedIn - frontend-toolkit&title=React%20Toolkit%20Collection&summary=Check%20out%20this%20awesome%20React%20toolkit%20collection!&source=LinkedIn)
  - ![Reddit - frontend-toolkit&title=React%20Toolkit%20Collection)
- 🚀 React Frontend Toolkit CLI
  - official documentation
  - official documentation
- Frameworks
  - Next.js - side rendering and static site generation for building fast and SEO-friendly web applications.
  - Next.js - side rendering and static site generation for building fast and SEO-friendly web applications.
  - Gatsby - based open-source framework for creating fast, secure, and powerful websites using modern web technologies.
  - Remix
  - RedwoodJS - stack, serverless web application framework built on React, GraphQL, and Prisma.
  - Gatsby - based open-source framework for creating fast, secure, and powerful websites using modern web technologies.
  - Remix
  - Blitz.js - stack experience with a focus on developer productivity.
  - RedwoodJS - stack, serverless web application framework built on React, GraphQL, and Prisma.
- ℹ️ About
  - GitHub stars
  - GitHub forks
  - GitHub issues
  - GitHub pull requests
  - GitHub license
- Authentication
  - Auth.js
  - Firebase Authentication
  - Auth0
  - Okta
  - AWS Amplify Auth
  - Auth.js
  - Firebase Authentication
  - Auth0
  - Okta
  - AWS Amplify Auth
  - Magic
  - Magic
- Tables
  - AG Grid - rich datagrid designed for the major JavaScript frameworks.
  - React Data Grid - like grid component built with React.
  - Griddle
  - React Virtualized
  - Tanstack Table
  - AG Grid - rich datagrid designed for the major JavaScript frameworks.
  - React Data Grid - like grid component built with React.
  - Griddle
  - React Virtualized
  - Tanstack Table
- Forms
  - React Hook Form - to-use validation.
  - Tanstack Form
  - React Json Schema Form
  - Formily
  - React Hook Form - to-use validation.
  - Tanstack Form
  - Formik
  - React Json Schema Form
  - Formily
- Hooks
  - novajs - free React hooks.
  - useHooks
  - React Use
  - ahooks - quality and reliable React hooks.
  - novajs - free React hooks.
  - useHooks
  - React Use
  - ahooks - quality and reliable React hooks.
- Notifications
  - Sonner
  - Sonner
  - React Toastify - to-use toast notifications to your React applications.
  - Notistack
  - Reapop
  - React Toastify - to-use toast notifications to your React applications.
  - Notistack
  - Reapop
  - React Hot Toast
  - React Notification System
  - React Toast Notifications
  - React Hot Toast
  - React Notification System
  - React Toast Notifications
- Routing
  - Wouter
  - Tanstack Router
  - Wouter
- State Management
  - Zustand - management solution.
  - Tanstack Store
  - Redux Toolkit
  - Recoil
  - Zustand - management solution.
  - Tanstack Store
  - Redux Toolkit
  - Recoil
- Styling
  - TailwindCss - first CSS framework for rapidly building custom user interfaces.
  - Styled Components
  - Emotion - in-JS library.
  - Vanilla Extract - runtime Stylesheets-in-TypeScript
  - Emotion - in-JS library.
  - Vanilla Extract - runtime Stylesheets-in-TypeScript
- Virtualization
  - Virtua
  - Tanstack Virtual
  - Virtua
- Charts
  - Recharts
  - React-Vis
  - ECharts for React
  - Visx - level visualization components for React.
  - React Flow - based editors and interactive diagrams.
  - Nivo
  - Recharts
  - React-Vis
  - ECharts for React
  - Visx - level visualization components for React.
  - React Flow - based editors and interactive diagrams.
- UI Components
  - Eldora UI - source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.
  - Radix UI
  - Material UI - source React component library that implements Google's Material Design.
  - Flowbite React - source UI component library built on top of Tailwind CSS with React components and based on the Flowbite Design System.
  - Next UI
  - Evergreen
  - Chakra UI
  - Mantine
  - Ant Design
  - Blueprint - based UI toolkit for the web.
  - FluentUI
  - Ariakit
  - NativeBase - first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
  - Shadcn UI
  - Eldora UI - source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.
  - Radix UI
  - ZenUI
  - Material UI - source React component library that implements Google's Material Design.
  - Material Tailwind - source library that uses the power of Tailwind CSS and React to help you build unique web projects faster and easier.
  - Flowbite React - source UI component library built on top of Tailwind CSS with React components and based on the Flowbite Design System.
  - Next UI
  - Evergreen
  - Chakra UI
  - Mantine
  - Ant Design
  - Blueprint - based UI toolkit for the web.
  - FluentUI
  - Ariakit
  - NativeBase - first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
  - Grommet - first projects for the web with an easy to use component library.
  - Reakit
  - FlyonUI - source Tailwind CSS Components Library with semantic classes and powerful JS plugins.
  - DaysiUI
  - Headless UI
  - React Email
  - React Bootstrap
  - PrimeReact - rich UI components.
  - Grommet - first projects for the web with an easy to use component library.
  - Reakit
  - ZenUI
  - FlyonUI - source Tailwind CSS Components Library with semantic classes and powerful JS plugins.
  - DaysiUI
  - Headless UI
  - React Email
- Icons
  - Material Icons
  - Bootstrap Icons - source SVG icon library for Bootstrap.
  - React Icons
  - Font Awesome
  - React Icons
  - Font Awesome
  - Heroicons - crafted SVG icons, by the makers of Tailwind CSS.
  - Feather Icons - source icons.
  - Heroicons - crafted SVG icons, by the makers of Tailwind CSS.
  - Feather Icons - source icons.
  - Material Icons
- File Upload
  - React Dropzone - and-drop zone with React.
  - Uppy
  - React Dropzone - and-drop zone with React.
  - Uppy
- Animations
  - Framer Motion - ready motion library for React.
  - React Spring - physics-based animation library for React.
  - Framer Motion - ready motion library for React.
- Maps
  - React Leaflet - source JavaScript library for mobile-friendly interactive maps.
  - Google Maps React
  - React Leaflet - source JavaScript library for mobile-friendly interactive maps.
  - Google Maps React
- Real-time Communication
  - Socket.IO - time, bidirectional and event-based communication.
  - Pusher - time apps with WebSockets.
  - Socket.IO - time, bidirectional and event-based communication.
  - Pusher - time apps with WebSockets.
- Video & Audio
  - React Player
  - React Webcam
  - React Sound
  - React Player
  - React Webcam
  - React Sound
- SEO
  - React Helmet
  - React Meta Tags
  - Next SEO
  - React Meta Tags
  - Next SEO
  - React Helmet
- Validations
  - Yup
  - Joi
  - Validator
  - Superstruct
  - Vest
  - Zod - first schema declaration and validation library.
  - Yup
  - Joi
  - Validator
  - Superstruct
  - Vest
  - Zod - first schema declaration and validation library.
- GraphQL
  - Relay - driven React applications powered by GraphQL.
  - Relay - driven React applications powered by GraphQL.
- Bundlers
  - Webpack
  - Vite - generation frontend tooling that focuses on speed and performance.
  - Parcel - configuration build tool for the web.
  - Webpack
  - Vite - generation frontend tooling that focuses on speed and performance.
- Linting & Formatting
  - ESLint
  - Prettier
  - ESLint
  - Prettier
- DevTools
  - React Developer Tools
  - Redux DevTools
  - React Developer Tools
  - Redux DevTools
- Testing
  - Jest
  - Vitest
  - Playwright - to-end testing framework for web apps, with support for multiple browsers.
  - Cypress
  - Jest
  - Playwright - to-end testing framework for web apps, with support for multiple browsers.
  - Cypress
- Documentation
  - Storybook
  - Docz
  - Docusaurus
  - MDX
  - Storybook
  - Docz
  - Docusaurus
  - MDX
  - Styleguidist
  - Nextra
  - Styleguidist
  - Nextra
- Performance Optimization
  - React Window
  - React Lazy Load
  - React Window
  - React Lazy Load
- Error Handling
  - React Error Boundary
  - React Error Boundary
  - Sentry - time.
  - Sentry - time.
- Internationalization
  - Format.JS
  - i18next
  - Format.JS
  - i18next
- Code Splitting
  - Loadable Components - splitting React components and loading them on demand.
  - React Loadable
  - Loadable Components - splitting React components and loading them on demand.
  - React Loadable
- Hosting
  - Vercel
  - Netlify
  - Firebase
  - AWS Amplify - end web developers to build secure, scalable full-stack applications.
  - Vercel
  - Netlify
  - Firebase
- API Clients & Data Fetching
  - Axios - based HTTP client for the browser and Node.js.
  - Fetch API
  - SWR
  - Tanstack Query - state utilities, and data fetching for TS/JS, React, Solid, Vue, Svelte, and more.
  - GraphQL Request
  - Axios - based HTTP client for the browser and Node.js.
  - Fetch API
  - SWR
  - Tanstack Query - state utilities, and data fetching for TS/JS, React, Solid, Vue, Svelte, and more.
  - GraphQL Request
- Visual Studio Code Extensions
  - ES7+ React/Redux/React-Native snippets
  - Simple React Snippets
  - Prettier - Code formatter
  - ESLint
  - React PropTypes Intellisense
  - VSCode React Refactor
  - React Native Tools
  - Jest
  - Tailwind CSS IntelliSense
  - GitLens - in Git capabilities of VS Code.
  - Path Intellisense
  - Code Spell Checker
  - Live Server
  - Paste JSON as Code
  - Simple React Snippets
  - Prettier - Code formatter
  - ESLint
  - React PropTypes Intellisense
  - VSCode React Refactor
  - React Native Tools
  - Jest
  - Tailwind CSS IntelliSense
  - Auto Import
  - Path Intellisense
  - Code Spell Checker
  - Live Server
  - Nova.js Visual Studio Code Extension - free React hooks to your project without leaving VS Code
  - Nova.js Visual Studio Code Extension - free React hooks to your project without leaving VS Code
- Live Coding Tools
  - CodeSandbox - time.
  - StackBlitz
  - JSFiddle
  - CodePen - end designers and developers, offering a platform to build and share React projects.
  - Replit
  - CodeSandbox - time.
  - StackBlitz
  - JSFiddle
  - CodePen - end designers and developers, offering a platform to build and share React projects.
- Popular Platforms
  - freeCodeCamp
  - Codecademy
  - Egghead.io
  - freeCodeCamp
  - Codecademy
  - Frontend Masters - depth courses on React and other frontend technologies taught by industry experts.
  - Egghead.io
- GitHub Repositories
  - React
  - React
- Forums
  - Hashnode’s React community
  - Reddit’s React community
  - DEV’s React community
  - Hashnode’s React community
  - Reddit’s React community
- ❤️ Support
  - ![ko-fi - fi.com/dayanperez)
  - ![ko-fi - fi.com/dayanperez)
- ✉️ Contact
  - @dayanDev
  - Dayan Perez
  - @dayanDev
  - Dayan Perez

Programming Languages

JavaScript 30 TypeScript 22

Ecosyste.ms: Awesome

react-frontend-toolkit

🧰 React Frontend Toolkit

Drag & Drop

📢 Share

🚀 React Frontend Toolkit CLI

Frameworks

ℹ️ About

Authentication

Tables

Forms

Hooks

Notifications

Routing

State Management

Styling

Virtualization

Charts

UI Components

Icons

File Upload

Animations

Maps

Real-time Communication

Video & Audio

SEO

Validations

GraphQL

Bundlers

Linting & Formatting

DevTools

Testing

Documentation

Performance Optimization

Error Handling

Internationalization

Code Splitting

Hosting

API Clients & Data Fetching

Visual Studio Code Extensions

Live Coding Tools

Popular Platforms

GitHub Repositories

Forums

❤️ Support

✉️ Contact