跳转到内容

选择语言

当前语言: 简体中文

React Components

Source: https://github.com/brillout/awesome-react-components at 66b2758c4808
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

这是AWESOME组件列表. 不,这不是一个完整的列表 每一个 React 太阳下的组成部分。 “棒极了”是什么意思? 这个嘛:

  • 它解决了一个真正的问题
  • 它这样做的方式是… 独一无二的,… … (而且这不是超级流行和众所周知的… )
  • 它有最近一个 code 承诺!

寻找一个真正惊人的项目。 并寻找快速维护者的评论和评论,在 (italic parens) 之后的一些注释列表。

另见: Awesome React Frameworks.

维护者 :

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

请审查一下我们 提供指南。我们通过 ** 要求所有公关从列表中删除一个或一个以上的非赞美条目来更新此列表**。 如果您也在删除新资源, 请只公开一个新的资源 。

Back to top ⬆️

  • AG Grid - 支持高级数据网格/ 数据表 Javascript / React / AngularJS /Web组件.
  • fortune-sheet - 在线预览表组件,提供与Excel一样的外置功能.
  • gigatables-react - 排序、页码/无限卷轴、全球/栏码搜索、 AJAX CROUD,还有更多。
  • Handsontable - demo - docs - 类似电子表格的数据网格 UI 支助 React, Angular, TypeScript 和 JavaScript.
  • jqwidgets-react-grid - 过滤、 铺设、 组合、 导出到 Excel, PDF, CRUD 以及更多。
  • MUI X Data grid - demo/docs - 为电力用户和复杂使用案例提供先进功能的快速和可定制的数据网。
  • react-data-grid - Excel类网格.
  • ReactGrid - demo/docs - 在应用程序中添加类似电子表格的行为
  • revo-grid - demo/docs - 动力全数据网 React / AngularJS / Vue / 具有高级定制的Web组件.
  • SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
  • SVAR React DataGrid - demo - docs - React DataGrid拥有细胞内编辑,树数据,上下文菜单,虚拟滚动等功能.
  • ka-table - demo - 可定制的表格组件,包括排序、过滤、分组、虚拟化、编辑等。

  • mantine-datatable - demo/docs - 曼汀的轻量级表格组件 UI 应用程序, 有很多特性

  • material-table - demo/docs - 盖上 Material UI,加:分组、树数据、可扩展行、导出、内线编辑

  • mui-datatables - 内建于 Material UI。搜索、造型、过滤、调整大小/隐藏列,导出、打印、选择/扩展列。

  • react-data-table - demo/docs - 易于使用、反应灵敏、易用、可申报、可配置的表格,包括排序、可选行、可扩展行、页码

  • TanStack Table - demo - 无头 UI 用于构建强大的表格和数据网格

  • react-table-library - demo - React 表格库 — — 一个几乎无头的表格库 — — 用于构建更好的表格。

  • rsuite-table - demo/docs - 支持虚拟化的表格组件。

  • DevExtreme React Grid - 基于高性能插件的数据网格 Bootstrap 和 Material Design.

  • Smart React Grid - 快速和特性完整数据网格 Material Design.

  • simple-table - demo - docs - 轻量级 快速 富有特色 排序/过滤,虚拟化,树数据,巢头,固定柱,定制造型等.

  • KendoReact Grid - 强大的数据网组件具有100+的即时使用功能,如呼号,排序,导出到Excel,等等.

  • Material-React-Table - 一个全功能 Material UI V5 TanStack的实施 React 表V8,从下到下 TypeScript

Display 覆盖 / 模式 / 提醒 / 对话框 / 灯箱 / 弹出

Toaster / 小吃栏 — 用模特儿临时弹出通知用户

菜单/边栏( M)

Fixed headers / 滚动页眉 / 粘贴元素

Loaders / 旋转器 / 进度栏 — 让用户知道正在装入的东西

图表中的数据( D)

  • cmdk - 快速、 可堆肥、 未设置命令菜单 React.
  • kbar - demo - 快速、便携和可扩展的cmd+k接口。

显示树数据结构( D)

导航视图( W)

  • react-dailymotion - 每日运动播放器组件 React.
  • react-player - 页:1 react 用于播放各种URL的组件,包括YouTube。
  • react-soundplayer - 创建自定义的 SoundCloud 播放器 React.
  • react-youtube - React.js 有动力的YouTube播放器组件.
  • video-react - 为 HTML5 世界所建的网络视频播放器 React 图书馆。
  • material-ui-audio-player - 音频播放器 material ui design.
  • react-vision-camera - 相机组件 React 使用“用户媒体”。 我们可以使用这个组件来完成计算机视觉任务,如条码扫描,文本识别等.
  • react-barcode-qrcode-scanner - 条码和 QR code 扫描器组件 React它使用 react- 视觉-摄像头可以访问相机,而Dynamsoft Barcode Reader可以读取条码.
  • google-map-react - 通用谷歌地图 react 组件,允许渲染 react 的组件。
  • mapkit - 使用 MapKit JS 整合 Apple Maps 的图书馆, 并附有说明, 覆盖和搜索 。
  • pigeon-maps - demo - ReactJS 无外部依赖的地图 。
  • react-geosuggest - 页:1 React Google Maps Places API 自动推荐。
  • react-leaflet - React Leaflet地图的组件。
  • react-map-gl - 页:1 React MapboxGL-js和覆盖API的包装器.
  • react-svg-map - demo - 一组显示交互式SVG地图的组件。

播放时间/ 日期/ 年龄( D)

播放图像/ 照片( D)

播放图标/ 图标设置/ emojis

  • iconify-react - 50+图标集的40k以上图标,包括所有流行的图标和emoji集.
  • react-icons - 视频 react 图标。
  • react-open-doodles - 很棒的免费插图 react 组件。
  • react-icomoon - 与 react- icomoon 您可以轻松使用您在 icomoon 中选择或创建的图标 。
  • tabler-icons-react - 一套超过450个免费的麻省理工学院许可的高质量SVG图标.
  • Lucide - 社区制作的美丽与一致的图标工具包. 开源项目和一叉 Feather 图标.

显示要粘贴的控制元素( D)

播放解析标记源( D)

使用 Canvas 或 SVG 输入的 Sketch

  • react-konva - React Konva 是一个 JavaScript 用于绘制与 Konva 框架绑定的复杂画布图形。
  • react-sketch - 一个用于 React 基于应用程序, 由 FabricJS 备份
  • react-sketch-canvas - Demo 自由手向量绘图工具 React 使用 SVG 作为画布 。 接受鼠标、触摸和图形平板的输入
  • react-heat-map - 轻量级日历加热图 react 基于 SVG 的组件, 自定义版本 GitHub贡献图.

让用户输入数据

日期采摘/时间采摘/日期采摘

Masked 输入, 专用输入; 电子邮件 / 电话号码 / 信用卡 / 等等

自动推荐/ 自动完成/ 键入前端( A)

  • coloreact - 一个很小的采色器 React.
  • react-color - 是一个很小的采色器部件组件,用于 React 应用程序。
  • react-colorful - 一个微小(2,5 KB),无依赖性,快速和方便的采色器组件.
  • react-input-color - React 带有 hsv 颜色选择器的输入颜色组件。

让用户在打字时选择某种内容( 如标签)

让用户在一个输入中添加多个标记

让用户定义列表中的顺序

图像操作( I)

  • @anatoliygatt/numeric-stepper - demo - 完全可主题和可获取的数字阶梯组件。
  • interweave - React 用于安全渲染的库 HTML,过滤属性,自动包装文本与匹配者, 使emoji字符, 以及更多。
  • react-designer - 易于配置、轻量级、可编辑的矢量图形 react 组件。
  • react-upload-gallery - React 用于上传图像图片库。 拖放、 可排序、 自定义 。

Back to top ⬆️

配置应用程序的 UI 组件

Back to top ⬆️

动物过渡

Back to top ⬆️

一组组件+应答布局系统

  • ant-design - demo/docs - 一个 UI Design 中国语言学. 个人 components 可用。
  • atlaskit - 阿特拉斯西亚官员 UI 库,包含从 badge 到 tree table 的组件。
  • base web - Base Web是启动、发展和统一网络产品的基础。
  • carbon - demo/docs - 一个 design IBM公司建造的系统。
  • cdbreact - demo - docs - 聪明 UI Kit 库和可重复使用的组件,用于建设移动第一,反应灵敏的网站和网络应用.
  • chakra-ui - demo/docs - 简单、模块化和无障碍 UI 您的组件 React 申请.
  • ChatUI - demo/docs - 那个 UI design 语言和 React 对话框库 UI
  • CoreUI for React - demo/docs - 开放源码 UI 组件库。
  • evergreen - demo/docs - 常绿 React UI 按部门分列的框架。
  • fluentui - 创建美丽跨平台共享应用程序的 UX 框架 code, design和互动行为
  • gestalt - demo/docs - 一套支持Pinterest的组件 design 语言。
  • grommet - 企业应用最先进的UX框架.
  • kokonut-ui - 自由现代和自定义 UI 组件。
  • Mantine - demo/docs - 一个装有100+钩子和组件的全功能库 native 暗色主题支持
  • orbit - 建设旅行项目的组成部分。
  • flowbite-react - 开源 UI 基于 React, Tailwind CSS,还有Flowbite。
  • primereact - 完整 UI 包含50+部分的框架 material, bootstrap 和自定义主题。
  • radix-ui - 用于建造高质量建筑的无型、无障碍组件 design 系统与网络应用.
  • react-bootstrap - Bootstrap 组件 React.
  • react-foundation - 基础为 React 组件。
  • reakit - demo/docs 构建可访问的丰富网络应用程序的工具包
  • searchkit - React UI 组件/部件。 与Elasticsearch一起建立伟大的搜索体验最简单的方法.
  • semantic-ui-react - 官方语义UI-React 融入社会。
  • semi-design - demo/docs - 现代、全面、灵活 design 系统。
  • shadcn/ui - demo - docs - 设计精美的组件,可以复制和粘贴到应用程序中.
  • shineout - demo ——方便中文的一组组件:形式元素,导航,桌,树,树选择下拉等.
  • Tremor - demo - docs - 建立图表和仪表板的开源组件。
  • untitled-ui-react - demo - 精巧设计的组件集 React Aria 和 Tailwind CSS.
  • 🚀 Material UI - 全套组件 自己盖 design 系统,或从 Material Design.
    • Autocomplete - 可用自动完成、 组合框、 多选择
    • Material Icons - 1 000+ SVG 组合 material 图标。
    • Modal - 可访问模式对话框组件 。
    • Slider - 可访问滑动器组件 。
    • Table - 表格中包含排序、选择、页化、虚拟化。
    • Tree View - 可访问树视图组件 React.
  • react-essence - Essence - 基本知识 Material Design 框架。
  • react-materialize - Material design (单位:千美元) react由变形体驱动
  • react-toolbox - 一组 React 执行 Google 组件 Material Design.
  • mdbootstrap - React Bootstrap 与 Material Design
  • antd-mobile - 可配置移动 UI 来自中国。
  • Ionic React - Ionic 框架: 容易构建 Android、桌面和进步网络应用程序 code 基础。
  • OnsenUI - demo/docs - 移动应用程序框架 Material 和平面设计。 基于Web组件.
  • blueprint - demo - docs - UI 用于构建复杂、数据密集的桌面(非移动)应用程序网络界面的工具包。
  • dataminr-react-components - 可重复使用的收集 React 部件和公用事业职能。
  • shards-react - docs/demo - 一个美丽和现代的 React design 系统。 费利米恩
  • aframe-react - A-Frame 虚拟现实体验 React.
  • react-admin - 在 REST 和 GraphQL 服务上建立管理员用户体验。
  • refine - demo - docs - 在短时间内建立数据密集型应用程序。 它和蚂蚁一起飞船 Design 系统,企业一级 UI 工具包。
  • matrix-card - demo - 生成矩阵雨式卡片的最简单可能的组件。
  • rsuite - demo/docs ——“企业系统产品”组件套装.
  • lens-ui - docs - 以简单为主的部件。
  • Tailwindadmin - docs - 现成沙德CN集 UI 您可以直接插入到您的组件中 React/Next.js 项目。

Back to top ⬆️

报表计算样式( R)

当一个组件可见/隐藏时报告

确定并报告元素的测量

将用户输入输入到动作中( T)

设置元标记( S), 儿童 <head>_

任意设置元素( R) DOM 节点

  • react-layer-stack - 简单但无处不在的强大和不可知的分层系统 React.
  • react-portal - React 用于运输模式、灯箱、装入条的组件。

A/B试验,实验,

Back to top ⬆️

帮助创建( L) code 设计

数据流/数据管理/数据存储/组件状态/数据流

  • baobab-react - React 为Baobab融入社会。
  • cerebral - 拥有自己的调试器的状态控制器 。
  • effector-react - React 对效果器绑定,有效的多存储状态管理器.
  • fireproof - demo - docs 纯JS,零依赖性,CRDT数据库 - 在浏览器中运行并连接到任何云端或后端
  • RxDB - demo - docs 快速、本地第一、反应性数据库 JavaScript 应用程序
  • fluxible - 通用通量应用的可插件容器.
  • kea - 高级架构 React 应用程序。
  • react-i13n - 一种表演者、可伸缩和可插件的方法,用于对您的 React 应用。
  • react-redux - 官方 React 约束 Redux.
  • redux-batched-actions - 减少者+减少单一用户通知下的行动。
  • redux - 可预测的状态容器 JavaScript 应用程序。
  • reselect - 选择库 Redux.
  • resourcerer - REST API 声明数据对比框架
  • synergies - docs 用于创建可重复使用的表演和分布式上下文状态库 React 通过协同atomar上下文块实现状态逻辑。
  • zustand - docs - 快速熊骨状态管理解决方案,采用简化的通量原理和无锅炉板的悬钩。
  • teaful - 轻而易举 强大 React 国家管理

通过网络同步获取的组件属性

  • react-refetch - 一种简单、可声明和可比较的方法,用于获取数据 React 组件。
  • redux-connect - 提供解析 Aync 道具的装饰器 react- 卢特
  • axios-react - HTTP 客户端组件 React.
  • apollo-client - 一个简单的缓存客户端,用于任何 GraphQL 服务器和 UI 框架。
  • react-relay - 中继是一个 JavaScript 数据驱动框架 React 应用。
  • query - docs 强大的同步状态管理、服务器状态公用事业和为TS/JS采集数据, React,固态,斯维尔特和 Vue.

脚手架/ 启动套件 / Yeoman 生成器 / 堆叠组合 / 种子

  • create-react-app - 创建 React 没有构建配置的应用程序 。
  • crisp-react - 快速整合 TypeScript 支持多个SPA和避免陷阱。
  • cra-template-redux-auth-starter - 页:1 Redux CRA的启动器锅炉板
  • electron-react-boilerplate - 在桌面app上实时编辑开发.
  • elegant - docs - demo - 很简单 React 快速构建美丽和表现的网络应用程序的框架 Next.js, Tailwind CSS,以及 Markdown 装填。
  • extensive-react-boilerplate - 与 Next.js, Auth(签名、签名、重置密码、确认电子邮件、刷新托肯), Material UI, React 钩形 I18N,文件上传(支持本地和亚马逊S3驱动程序),Tests,CI.
  • generator-starhackit - 装满的启动器
  • nwb - CLI 工具和依赖性 React 应用 & amp; 组件和 npm 模块。
  • nx - 下一代构建系统,拥有一流的单雷波支持和强大的集成.
  • PBandJ - 0-Config 重用组件框架.
  • react-hot-boilerplate - 最小的活版锅炉板给你的下一个 ReactJS 项目。
  • rockpack - 创建的简单解决方案 React 在5分钟内进行测试。
  • create-react-dependency - 创建 react 没有构建配置的依赖性 。
  • phoenix - 一个简单的锅炉板 帮助你做你的 react 与服务器侧面渲染和本地化支持的应用程序。
  • react-enterprise-starter-kit - 高度可伸缩性与表演性 真棒 React 用于企业应用程序的启动器 Kit,它有一个非常容易维护的代码库.
  • Tailwindadmin - 免费Shadcn Dashboard 模板构建于 React 和 Tailwind CSS 包含多个框架支持
  • react-inlinesvg - SVG 装载器组件 ReactJS.
  • react-godfather - 一个新的写功能组件的方法,没有胡克.
  • react-vvm - MVVM的新方法 React,以强制清洁地分离关切,减少锅炉板,以及自动重新调整优化可伸缩性 UI 逻辑
  • react-call - 打电话给你 React 组件。
  • redux-auth-patch - 完整代号认证系统 react + redux 支持异态渲染。
  • redux-search - Redux 绑定客户端搜索。
  • tcomb-react - PropTypes的替代语法.
  • react-universal-hooks - : tada: 支持 react 到处都是钩子(功能或类组件).

Back to top ⬆️

国际化/L10n/本地化/翻译 .

Back to top ⬆️

  • iSSR - 最容易移动你的方式 React 应用到 Server-Side 渲染 。 处理侧面效果并同步状态 。
  • react-esi - 一个通过曝光来提升SSD性能的库 React 作为边边的组件包括(ESI)碎片

Back to top ⬆️

  • enzyme - JavaScript 测试公用事业 React.
  • jest-cli - 无痛 JavaScript 测试
  • react-unit - 轻量级单元测试库 ReactJS.
  • redux-test-recorder - 页:1 redux 通过中间软件自动生成还原器测试 ui 互动。
  • rut - React 测试变得简单 react-test-renderer支持 DOM 和定制的制造者。
  • unexpected-react - 用于测试全数的意外插件 React 虚拟 DOM和浅的渲染器。
  • playwright enables reliable end-to-end testing for modern web apps.
  • fluxguard - PROD 变革监测 DOM + design 变化。
  • react-inspector - 浏览器 DevTools 检查器在您内部的力量 React 应用
  • reactotron - 检查您的 CLI 和 OS X 应用程序 React JS和 React Native 应用程序。
  • Tail Lens - Tailwind 浏览器中的编辑器 : 检查,编辑,预览,复制.

Back to top ⬆️

Back to top ⬆️

  • BCMS - 基于API,开源,可自我托管的内容管理系统用于Gatsby,Nuxt和Next.
  • crisp-bigquery - 将 Google 大查询与 Express 完全堆栈 TypeScript.
  • react-server-routing-example - 通用客户端/服务器路由和数据与AWS DynamoDB.

HagiCode

HagiCode 是面向项目开发的 AI 编码工作台:丰富、便捷的界面交互让规划、Agent 执行与项目工作更容易上手和跟进,带来更投入的开发体验。

丰富、便捷的界面交互,让规划、Agent 执行与项目工作更容易上手和跟进。

访问 HagiCode阅读文档
  • 智能OpenSpec 工作流把意图转化为从提案、设计、任务到交付的可执行路径。
  • 高效多 Agent 并行推进调研、实现与审阅,并支持多仓库变更和你熟悉的 Agent CLI。
  • 有趣丰富、便捷的界面交互让规划、Agent 执行与项目工作更容易上手和跟进,带来更投入的开发体验。

下载 Windows 版

从 Microsoft Store 获取全部下载

让想法变成真正交付的软件。

HagiCode 是面向项目开发的 AI 编码工作台:用 OpenSpec 工作流规划变更,多 Agent 并行执行,再由 Hero Scenario 让进度一目了然,把想法变成真正交付的软件。

智能
OpenSpec 工作流把意图变成从提案到交付的可执行路径。
高效
多 Agent 并行推进调研、实现与审阅。
有趣
丰富、便捷的界面交互,让规划、Agent 执行和项目工作更容易跟进。

离开 Awesome Site?

你即将访问外部网站。我们无法控制其内容或隐私惯例。

目标地址

继续访问网站