【免费下载链接】ui-components
Motion components for React. Copy, paste, done.
beUI 是一个面向 React 和 Next.js 的开源React Motion 组件库，核心理念只有一句话：Copy, paste, done（复制、粘贴、完成）。它把按钮、导航、弹窗、图表、AI 对话等常用界面都做成了带动效的组件，你只需把源码装进项目，代码就归你所有，可随意修改。对于想做出"高级感动效"但又不想从零手写弹簧动画的开发者来说，beUI 是目前最省心的选择之一。下面从 7 个维度拆解它的核心优势。
一、复制即安装：代码归你所有，没有黑盒
很多组件库是"黑盒依赖"——版本升级、样式冲突、API 变动都被动挨打。beUI 走的是shadcn 风格的源码分发模式：安装命令会把组件的完整源码直接写进你的仓库，之后改样式、改动画参数都自由。
在已配置 shadcn 的项目中，一条命令即可安装：
npx shadcn@latest add @beui/animated-toast-stack每个组件都有独立的安装入口和元数据，目录由 lib/registry.ts 统一维护，并通过 app/r/registry.json/route.ts 暴露给安装工具，组件页面还附带在线预览、用法示例和精确的安装命令。
二、四大组件系列，覆盖完整产品界面
beUI 不是只有几个孤立的小组件，而是按产品场景组织成4 大系列、100+ 组件：
| 系列 | 内容 | 源码位置 |
|---|---|---|
| Components | 按钮、标签页、滑块、提示框、抽屉等动效基础组件 | components/motion/ |
| Blocks | 命令面板、文件上传、注册表单、动态岛等组合式成品模块 | components/previews/blocks/ |
| AI Agents | 聊天布局、流式消息、审批卡片、工具结果等 AI 界面 | components/agents/ |
| Charts | 排名图、漏斗图、热力日历、订单簿等数据可视化 | components/charts/ |
每个组件的演示页面都内置实时预览，可以开关 Motion 直接对比动效开关前后的差异，看完"长什么样"再决定要不要安装。
三、统一的动效设计语言：好看不靠运气
新手自己做动效最常见的翻车点是：每个组件参数都不一样，页面看起来"哪里都在动但都不顺"。beUI 把所有动效参数收敛为一套共享 token：
- 缓动曲线与弹簧配置统一出自 lib/ease.ts（如
SPRING_PRESS、SPRING_PANEL、EASE_OUT），禁止各组件私自写一次性参数 - 只动画
transform和opacity，避免布局抖动，UI 动画控制在 300ms 以内 - 退出动画快于进入动画，按压反馈在 100–160ms——这套节奏让所有组件"手感一致"
这意味着你把 10 个 beUI 组件拼在一个页面里，视觉和手感天然协调，不需要逐个调参。
四、内置完整的 AI Agent 界面组件
如果你的产品正在接入大模型，beUI 的Agents 系列会直接省掉大量界面开发工作，常用件一应俱全：
chat-app：可组合的 AI 工作区外壳（侧边栏 + 消息 + 流式输出）message/message-scroller：会跟随流式输出自动滚动的对话消息prompt-input：自动增高、带模型选择的输入框approval-card/tool-approval：人工审批与工具权限卡片code-block/file-diff：流式代码块与文件差异展示thinking-shimmer/reasoning-text："思考中"加载态
完整清单见 components/agents/ 与对应的演示文件 components/previews/agents/。
五、键盘与无障碍支持开箱即用
"动效炫但没法用键盘"是很多开源动效组件库的通病。beUI 把无障碍写进了开发规范：
- 交互式组件全部支持键盘操作（方向键、回车、Tab 顺序、焦点管理）
- 使用
useReducedMotion()尊重系统"减弱动态效果"设置，保留透明度过渡、去掉位移动画 - 项目维护着一套持续运行的无障碍测试套件，见 tests/a11y.test.tsx 及 tests/ 目录下的各组件专项测试
六、对 AI 编程助手的一级支持
用 Cursor、Claude 这类 AI 写代码的同学，beUI 提供了完整的"喂料"通道，让 AI 能直接查组件、装组件，而不是自己瞎造：
| 通道 | 用途 |
|---|---|
公共 MCP 服务mcp.beui.dev/mcp | AI 客户端列出、搜索、获取组件源码，无需密钥 |
/llms.txt端点 | 给 AI 读的文档索引，路由见 app/llms.txt/route.ts |
/r/registry.json | 可安装组件目录，路由见 app/r/registry.json/route.ts |
| beUI Skill | 一条命令安装的技能，教 AI 把需求映射到精确的安装 slug，见 skills/beui/SKILL.md |
连接方式详解可查看 app/docs/ai-agents/page.tsx 对应的官方文档页，服务端实现参考 mcp/。
七、TypeScript 严格模式 + MIT 协议，商用无忧
- 全库 TypeScript 严格模式编写，类型提示完整
- 没有
beui运行时包——装进来的就是纯源码 + 命名导出，不引入额外依赖，不存在版本升级风险 - 所有组件都接受
className并通过cn()合并，无缝接入 Tailwind 主题 - MIT 协议（见 LICENSE），个人与商业项目均可免费使用
快速上手：三步开始使用
- 浏览：进入组件页面挑选，每个页面都有实时预览和安装命令
- 安装：
npx shadcn@latest add @beui/<组件名>，源码落进项目 - 修改：直接改源码适配你的产品——这就是"拥有代码"的意义
也可以在 app/playground/page.tsx 对应的 Playground 页面里，交互式地调节弹簧参数和缓动曲线，理解每个动效背后的物理参数。
总结：谁适合用 beUI？
- ✅ 想让 React 界面"动起来"但没时间手写动画 —— 装现成的
- ✅ 在做 AI 聊天产品 —— Agents 系列开箱即用
- ✅ 用 AI 编程助手开发 —— MCP 通道让 AI 帮你查装组件
- ✅ 介意组件库黑盒问题 —— 源码在你仓库里，想改就改
一句话：beUI 用"源码分发 + 统一动效 token + AI 友好"三件套，把 React 动效开发从"手搓动画"变成了"挑选组件"，这正是它区别于普通 UI 组件库的 7 大优势所在。
【免费下载链接】ui-components
Motion components for React. Copy, paste, done.
相关推荐
为什么选择@alifd/next：企业级React组件库的10大优势
为什么选择@alifd/next：企业级React组件库的10大优势 在当今快速发展的前端开发领域，选择合适的UI组件库对于企业项目的成功至关重要。@alifd
前端UI组件设计系统为什么选择React Native Background Geolocation：7大优势详解
为什么选择React Native Background Geolocation：7大优势详解 React Native Background Geolocat
5分钟掌握 Material-UI Accordion 折叠面板：从最小示例到嵌套实战完整指南
5分钟掌握 Material UI Accordion 折叠面板：从最小示例到嵌套实战完整指南 Material UI 的 Accordion 折叠面板把长内容
前端UI组件设计系统
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
