React
官方资源
路由
- @tanstack/react-router 🤖 客户端优先、支持服务端的完全类型安全路由
- react-router React 声明式路由
AI
工具
- @tanstack/ai-react 一款可为应用程序赋予 AI 能力的智能 SDK
- @json-render/react AI → JSON → UI
- tambo React 生成式 UI SDK
Hooks
- use-stick-to-bottom 一个轻量级的 React Hook，主要面向 AI 聊天类应用场景，用于实现消息列表平滑贴合底部的效果
组件
- tool-ui 用于 AI 界面的 UI 组件
- assistant-ui 基于 TypeScript/React 的 AI 聊天专用库
- agentic-ui 面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力
- @ant-design/x AI 界面解决方案
其他
- comark 一款高性能的 Markdown 解析与渲染器，支持 Vue 和 React 组件
- streamdown 一个可直接替换 react-markdown 的组件，专为AI 驱动的流式输出场景设计
多语言
- js-lingui 🌍 📖 轻量至 2 kb！易读、自动化的 JS 国际化方案
- react-i18next 为 React 精心打造的国际化方案，基于 i18next 国际化生态构建
- react-intl
框架
- nextjs 面向 Web 的 React 框架
- onestack
- refine 用于快速构建内部系统、管理后台、仪表盘与 B2B 应用的高灵活度 React 框架
- umi 企业级前端开发框架 - 蚂蚁金服出品
- modernjs 一款基于 React 和 Rsbuild 的渐进式 Web 框架 - 字节出品
状态管理
- zustand 🐻 React 状态管理的核心基础套件
- jotai 👻 轻量简洁、灵活易用的 React 状态管理
- valtio 🧙 Valtio 让 React 与原生 JS 的代理状态变得简单易用
- react-redux Redux 的官方 React 绑定库
- @tanstack/react-query 🤖 功能强大的异步状态管理工具，同时提供服务端状态处理能力与网页端数据请求方案
动画
- motion 一款适用于 React 与 JavaScript 的现代动画库
- react-spring ✌️ 一款基于弹簧物理模型的 React 动画库
- @rive-app/react-webgl2
- @galacean/effects 一款基于 WebGL 和 glTF 构建的 TypeScript 交互式引擎，支持 2D、3D、动画与物理效果
- lottie-web 原生渲染由 After Effects 制作的动画，支持 Web、Android、iOS 及 React Native 平台
- lottie-react 用于通过 Lottie 实时渲染复杂的 After Effects 动画
Hooks
- ahooks 一套高质量可靠的 React Hooks 库
- @mantine/hooks
- use-debounce 防抖
- react-hotkeys-hook 键盘快捷键
- use-resize-observer 用于测量元素尺寸、基于 ResizeObserver 的 React Hook
组件库
- react-bits 一款开源的 React 组件合集
- antd 一套企业级 UI 设计语言和 React 组件库
- semi 字节出品(包含 AI 组件)
- shadcn-ui 设计精美、无障碍的组件体系与代码分发平台，兼容主流框架，开源开放
- material-ui 套全面落地谷歌 Material Design 设计规范的 React 组件库
- mantine 功能完备的 React 组件库
- react-bootstrap 基于 React 构建的 Bootstrap 组件库
- semantic-ui 基于自然语言实用原理构建的 UI 组件框架
- chakra-ui 一套可快速构建 SaaS 产品的组件体系
- react-aria-components
数据可视化
图表
- echarts-for-react 一个简单的 Apache echarts 的 React 封装
- recharts 使用 React 和 D3 重新定义图表库
- @tremor/react 用于构建图表和数据看板的 React 组件
3D
- @react-three/fiber 一款基于 Three.js 的 React 渲染器
- drei 适用于 react-three-fiber 的实用辅助工具
其他
- @xyflow/react 构建基于 Node 的用户界面
组件
画板
- tldraw 非常优秀的白板无限画布 SDK
- excalidraw 一款可手绘风格草图、类白板效果的虚拟白板工具
- drawnix 开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等
通用
布局
- rc-dock 适用于 React 组件的停靠式布局
- react-rnd 🖱 一款面向 React 的可调整大小且可拖拽组件
- react-sticky-box 支持各类尺寸内容的粘性容器组件
- react-split-pane 分割面板
- react-resizable-panels React 可调整大小面板组/布局组件
- react-grid-layout 一款适用于 React 的可拖拽、可调整大小的网格布局组件，支持响应式断点配置
数据录入
- react-image-crop 图片裁剪
- antd-img-crop 图片裁剪
- svelte-jsoneditor 一款基于网页的 JSON 工具，可用于查看、编辑、格式化、修复、查询、转换和验证 JSON 数据
- react-currency-input-field 金额
- react-phone-number-input 电话输入
- antd-phone-input 电话输入
- emoji-picker-react 最受欢迎的 React 表情选择器
- react-day-picker 一款可定制的 React 日期选择器组件
- react-dropzone 基于 React.js 实现的轻量 HTML5 拖放上传区域
- react-international-phone 国际电话输入组件
- input-otp 一个用于输入一次性密码(OTP)的 React 组件
数据展示
- react-highlight-words 关键字高亮
- qrcode.react 二维码
- react-fast-marquee 跑马灯
- reactour React 指引组件
- react-arborist 适用于 React 的一站式树形视图组件
- react-syntax-highlighter 基于 PrismJS 或 HighlightJS 抽象语法树（AST）、使用内联样式实现的 React 语法高亮组件
- react-number-format 数字格式化组件（支持输入框）
- react-grid-gallery 自适应对齐图片画廊组件
- embla-carousel 一款轻量型轮播图库，具备丝滑动效与精准滑动体验
- react-photo-view 一款精致的 React 图片预览组件
- yet-another-react-lightbox 现代化的 React 灯箱组件
- rc-footer 应用于 ant.design 的精美页脚 React 组件
反馈
- react-nprogress 顶部进度条
- react-toastify 消息通知
- react-tooltip 提示框组件
- react-hot-toast 超赞的 React 通知组件 🔥
- sonner 一个具有独特风格的 React 提示组件
- react-loading-skeleton 骨架屏
文件相关
- react-pdf 在 React 应用中展示 PDF 文件，就像展示图片一样简单
- @react-pdf/renderer PDF
- react-markdown React Markdown 组件
- react-markdown-editor-lite 一款轻量的基于 React 的 markdown 编辑器
- @mdxeditor/editor 一个用于 Markdown 的富文本编辑器 React 组件
富文本
- platejs 集成 AI、MCP 功能的 shadcn/ui 富文本编辑器
- lexical 一款可扩展的文本编辑器框架，具备出色的可靠性、易用性与性能表现
- reactjs-tiptap-editor 一款基于 Tiptap 与 shadcn/ui、适用于 React 的现代化所见即所得富文本编辑器
- react-quill 一款适用于 React 的 Quill 组件
音视频
- remotion 借助 React 以编程方式制作视频
- react-player
- react-voice-visualizer 基于 Web Audio API 实现音频录制与可视化的 React 库
- media-chrome 用于打造音视频播放器控件的自定义元素 (web components)
拖拽
其他
- react-resizable 一个带拖拽手柄、可调节尺寸的简易 React 组件
- react-confetti-explosion 五彩纸屑动画效果
- react-speech-recognition 为你的 React 应用提供语音识别功能
- @pierre/diffs
- marked-react 将 Markdown 渲染为 React 组件
- cmdk 高性能、无预设样式的 React 命令菜单组件
- @use-gesture/react 手势库
- react-frame-component 将你的 React 应用渲染到 iframe 中
- react-responsive React 中的 CSS 媒体查询 —— 用于响应式设计及更多场景
- @tanstack/react-virtual 虚拟列表
- @tanstack/react-table 适用于 TS/JS 的无头 UI 工具：用于构建功能强大的表格与数据网格
- react-oauth 谷歌登录
- react-copy-to-clipboard 拷贝
- react-error-boundary 简洁可复用的 React 错误边界组件
- focus-trap-react 一个用于捕获焦点的 React 组件
- react-codemirror 适用于 React 的 CodeMirror 6 组件
- react-codemirror-merge 适用于 React 的 CodeMirror 合并视图组件
- react-jsonschema-form
开发模版
- slash-admin 一款现代化的 React 管理后台模板。基于 React 19、Vite 与 TypeScript 构建，性能高效！
- lemon-mobile-react 一个基于 React 生态系统的移动 web 应用模板
其他
- react-scan 检测 React 应用中的性能问题，消除应用内的慢渲染现象
- react-grab 直接从你的网站中为编码智能体选择上下文
- redi 一款适用于 TypeScript 和 JavaScript 的依赖注入库，同时提供 React 绑定功能
- tweakcn 面向 shadcn/ui 组件的视觉化无代码主题编辑器