产品展示
声明：文档由AI生成，仅作参考，最终功能和计费标准以官方为准。
一、产品概述
React Bits 是由开发者 David Haz 研发的开源 UI 组件集合，提供动画、交互式且完全可定制的 React 组件，用于构建具有视觉表现力的网站界面。该库包含组件、动画、背景和文本动画四大类别，每个组件提供 JavaScript + CSS、JavaScript + Tailwind、TypeScript + CSS、TypeScript + Tailwind 四种实现变体，支持通过 CLI（jsrepo 或 shadcn）安装或手动复制代码至项目中使用。
除免费开源库外，同一作者还提供付费商业版本 React Bits Pro，为需要完整页面区块、应用界面组件和落地页模板的开发团队提供商业工具集。
二、产品特色
免费开源版（reactbits.dev）
- 组件规模：提供 110+ 免费动画组件，涵盖文本动画、UI 元素和背景效果三大类别，组件数量持续更新。
- 实现变体：每个组件提供四种实现变体——JavaScript + CSS、JavaScript + Tailwind、TypeScript + CSS、TypeScript + Tailwind，各变体在更新时保持同步。
- 极简依赖：组件依赖精简，支持 tree-shaking，保持轻量化的打包体积。
- 完全可定制：所有组件均可通过 props 调整参数，或直接编辑源码进行深度定制。
- 安装方式：支持 shadcn 和 jsrepo 两种 CLI 工具快速安装，同时支持手动复制代码，兼容任意现代 React 项目。
- 组件分类：按语义组织为 UI Components、Animations、Backgrounds、Text Animations 四大类别。
- 开源许可：采用 MIT + Commons Clause 许可协议，个人和商业用途均可免费使用。
- 配套工具：提供三款免费创意工具——Background Studio（探索并导出动画背景）、Shape Magic（创建圆角形状并导出 SVG/React/clip-path 代码）、Texture Lab（对图片/视频应用 20+ 种纹理效果）。
- 官方移植：提供 Vue.js 版本，地址为 vue-bits.dev。
React Bits Pro（商业版本）
React Bits Pro 是面向 React/Next.js 开发者的付费组件库，基于五大核心板块构建：
- 创意组件（150 个） ：动画文本、光标、3D 与 WebGL 场景、粒子效果、列表、过渡和背景，每个组件提供 Tailwind 和原生 CSS 两种变体。
- 页面区块（280 个，覆盖 22 个类别） ：营销页面区块，包括 Hero 区、定价表、功能展示、用户评价、FAQ、CTA、页脚和导航等，仅提供 Tailwind 版本，代码自包含且可编辑。
- 应用 UI 区块（300 个，覆盖 38 个类别） ：产品界面区块，包括仪表盘、侧边栏、数据表格、设置表单、对话框和 AI/Agent 交互界面，基于统一设计系统构建。
- 落地页模板（15 个） ：完整 Next.js 落地页模板，涵盖 SaaS、AI SaaS、AI 应用、代理机构、Shader、安全、8-bit 等场景，Ultimate 层级包含完整模板目录。
- Agent Kit（20 项） ：设计技能、页面提示词、完整页面配方及设置技能，用于指导 AI 编码代理安装和组合组件库。
Pro 版核心技术特性包括：TypeScript 优先，适配 React 19 和 Next.js 16，严格类型和可预测 API；通过 shadcn registry 协议分发，代码以纯 React 和 TypeScript 形式落入用户仓库，无运行时 npm 依赖锁定；提供已发布的 SKILL.md 文件，支持 Cursor、Claude Code、v0、Bolt.new、Lovable 和 Replit 等 AI 编码工具首次安装即可正确使用；每月持续发布新组件和区块，支持终身更新。
三、收费标准
React Bits 免费开源版遵循 MIT + Commons Clause 许可协议，所有组件免费使用，无付费模块。React Bits Pro 为独立付费商业产品，采用一次性买断制，具体套餐如下：
| 层级 | 价格（一次性） | 核心权益 |
|---|---|---|
| Starter | $99 | 100+ 动画 React 组件；Tailwind 和原生 CSS 变体；TypeScript 类型支持；一键安装（shadcn、Cursor、Claude Code）；未来新增组件免费包含；商业许可，不限项目数量 |
| Pro | $199 | 包含 Starter 全部内容；238+ 预构建页面区块（21 个类别）；300 个应用 UI 区块（38 个类别）；Agent Kit；未来新增区块免费包含 |
| Ultimate | $299–$349 | 包含 Pro 全部内容；11–15 个完整 Next.js 落地页模板；优先邮件支持（24 小时响应） |
说明：Pro 层级价格在官方不同页面显示为 $199 与 $249 两种，Ultimate 层级显示为 $299 与 $349 两种，差异源于促销活动（如夏季促销 30% 折扣）。每个许可证覆盖一名开发者，3 人及以上团队可通过 pro@reactbits.dev 咨询批量定价。Pro 版支持一次性支付、终身更新、无订阅费用、无席位费。
四、常见问题
Q：React Bits 免费版和 React Bits Pro 有什么区别？
A：免费版（reactbits.dev）提供 110+ 独立动画组件，采用 MIT + Commons Clause 许可，适合个人项目和副业开发。React Bits Pro 是付费商业工具集，在免费组件基础上增加 238+ 页面区块、300 个应用 UI 区块、11–15 个完整落地页模板、Agent Kit 以及覆盖不限项目的商业许可。两者由同一作者开发，可在同一项目中并存使用，注册表命名空间不同（@react-bits 与 @reactbits-pro/@reactbits-starter）。
Q：React Bits 支持哪些技术栈？
A：免费版支持 JavaScript 和 TypeScript，样式方案支持原生 CSS 和 Tailwind CSS，每个组件提供四种变体组合。Pro 版为 TypeScript 优先，每个组件提供 Tailwind 和原生 CSS 两种变体，适配 React 19 和 Next.js 16。
Q：如何安装 React Bits 组件？
A：免费版支持两种 CLI 安装方式。shadcn 方式：npx shadcn@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>；jsrepo 方式：npx jsrepo@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>。Pro 版通过 shadcn registry 协议分发，激活许可证后执行类似 npx shadcn@latest add @reactbits-pro/hero-7 的命令即可将代码安装至项目仓库。
Q：React Bits 的许可证是否允许商业使用？
A：免费版采用 MIT + Commons Clause 许可，允许个人和商业使用。Pro 版提供明确的商业许可，单个开发者许可证覆盖不限数量的客户项目。
Q：React Bits 是否支持 AI 编码工具？
A：Pro 版提供已发布的 SKILL.md 文件，支持 Cursor、Claude Code、v0、Bolt.new、Lovable 和 Replit 等 AI 编码工具首次安装即可正确识别和使用组件。Agent Kit 包含 20 项设计技能和页面提示词，可指导 AI 代理独立完成页面组装。
Q：购买 Pro 版后是否包含后续更新？
A：React Bits Pro 为一次性买断制，包含终身更新。新组件和区块每月发布，已购用户无需额外付费即可获取所有新增内容。