React Bits
面向 React 与 Next.js 的开源动画组件库，提供 215+ 个可交互、可定制的动效组件与背景，支持 JS/TS 与 CSS/Tailwind 四种风格，并可通过 shadcn CLI 或 MCP 直接引入项目。
过去 7 天收获 9 颗 Star
爱鲜报评分
0 人评分
51k
星数
否
中文
JavaScript
主语言
是
活跃
140
贡献者
人工分析
EDITORIAL推荐理由
组件数量多、分类清晰，覆盖文字动画、背景特效、卡片导航等常见视觉需求，能显著缩短动效开发时间。支持 shadcn 与 jsrepo 一键安装，还提供 MCP 接入，方便在 Cursor、Claude Code 等 AI 编程工具中直接调用。适合想快速做出有记忆点界面的前端团队。
适用场景
- 营销落地页与产品官网动效
- React/Next.js 项目快速搭建视觉亮点
- AI 编程助手（MCP）自动引入组件
- 个人作品集与创意展示页面
- 后台/工具站的微交互细节优化
优点
- 组件数量多、分类完整，覆盖文字、背景、卡片、微交互等场景
- 同时提供 JS/TS 与 CSS/Tailwind 四种风格，适配不同技术栈
- 支持 shadcn CLI、jsrepo 与 MCP 多种引入方式，集成成本低
- 每个组件带在线演示与可调参数，方便预览和二次修改
- 社区热度高，Star 数超过 5 万
缺点
- 许可证为 MIT + Commons Clause，商用需留意条款限制
- 部分背景与 3D 效果依赖 WebGL/着色器，低端设备可能有性能压力
- 组件风格偏炫酷，需按产品调性筛选，避免过度使用
- 文档与社区以英文为主，中文资料较少
React Bits 是什么
React Bits 是一个面向 React 与 Next.js 的开源动画组件库，主打「让人记住的网页动效」。它提供 215+ 个免费动画组件与背景，每个组件都有在线演示和可调参数，你可以自己调，也可以交给 AI Agent 引入。
组件分类
| 分类 | 数量 | 典型内容 |
|---|---|---|
| 文字动画 | 33 | 拆分文字、打字机、轮播词、滚动显现 |
| 动画 | 38 | 光标特效、悬停交互、边框与图片效果 |
| 组件 | 48 | 卡片、导航、轮播、画廊 |
| 微交互 | 34 | 按钮、开关、指示器等小细节 |
| 背景 | 63 | 渐变、粒子、网格、着色器效果 |
每个组件都提供四种风格：JavaScript 或 TypeScript，搭配 CSS 或 Tailwind。
安装方式
推荐使用 shadcn CLI，后缀决定风格（JS/TS + CSS/TW）：
npx shadcn@latest add @react-bits/SplitText-TS-TW
也可以使用 jsrepo：
npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW
如果只想手动复制，打开组件页的 Code 标签，选择风格后把文件粘贴进项目即可。
与 AI Agent 配合
React Bits 兼容 shadcn MCP 服务器，Claude Code、Cursor、Codex、VS Code 等客户端可以自动查找并添加组件。在 components.json 中注册：
{
"registries": {
"@react-bits": "https://reactbits.dev/r/{name}.json"
}
}
然后初始化 MCP 客户端，例如 npx shadcn@latest mcp init --client claude，再直接描述需求即可。
创意工具
官网还提供 Background Studio、Center Stage、Shape Magic、Texture Lab、Sound Lab 等浏览器内工具，可用于生成背景、产品截图、Logo 材质、纹理与音效，并导出代码、图片或视频。
注意事项
- 许可证为 MIT + Commons Clause，商业使用前请阅读条款。
- 背景与 3D 类组件依赖 WebGL，移动端或低端设备需关注性能。
- 动效风格偏炫酷，建议结合产品调性按需选用。
评论
- 暂无评论，来写第一条吧。