React Bits

React Bits 是一个由 David Haz 维护的开源 React 动画组件集合，提供 110+ 组件并以 JS/TS × CSS/Tailwind 四种变体交付，通过 shadcn/jsrepo CLI 一键集成，定位为创意动效层而非完整 UI 框架。

它能做什么

组件按 Text Animations、Animations、Components、Backgrounds 四大类划分，覆盖从文本分割动画到液态镀铬背景的创意效果。

• 文本动画: Split Text 可将字符逐字拆解做动画，另有模糊、闪亮、渐变等特效组件
• 交互组件: 包含堆叠、停靠、砌体布局等 UI 元素，以及 Hover/Press 反馈动效
• 背景组件: 提供极光、形状模糊、超高速运动等动态背景
• 动画组件: 涵盖内容淡入淡出、像素转换、模拟磁力线吸引等效果

怎么上手

安装方式灵活：可通过 npm install react-bits 全局安装，也支持通过 shadcn 或 jsrepo 的 CLI 按需拉取单个组件源码到项目中。

• 四种变体选择: 每个组件同时提供 JS-CSS、JS-TW、TS-CSS、TS-TW 四种代码版本，适配不同工程偏好
• 最小依赖: 组件尽量保持 minimal dependencies，3D 组件需额外安装 three 和 @react-three/fiber
• CLI 交互式安装: 部分特效无法通过 npm 引入时，使用 CLI 工具在命令行交互选择框架与 CSS 技术栈，自动生成组件文件到 components 目录
• 集成兼容: 支持 Next.js、Vite、CRA 等常见构建工具

收费与限制

项目采用 MIT + Commons Clause 许可，个人和商业项目均可免费使用并修改代码，但不得将软件本身作为商品销售。

• 开源版免费: 包含全部 110+ 组件及四种变体，无付费版本
• 赞助支持: 可通过 Ko-fi 自愿打赏作者，不影响许可内容
• TypeScript 支持: 仍在开发中，但已提供 TS 变体供部分组件使用

注意事项

社区已出现非官方的 React Bits MCP Server 项目，用于 AI 助手检索与集成组件，但非官方维护。

• 许可限制: 允许商业项目使用，但禁止以“销售软件”方式直接售卖组件库本身
• 按需导入: 建议结合 Tree Shaking 只引入实际使用的组件，降低首屏体积
• 设计协同: 先通过官网 Demo 确认动效强度与节奏，再接入业务页面可减少返工

常见问题

Q1：React Bits 的组件是否支持 Tailwind CSS？

A1：支持。每个组件提供四种变体，其中 JS-TW 和 TS-TW 即基于 Tailwind CSS 的实现，可直接在已有 Tailwind 项目中使用。

Q2：React Bits 的 CLI 安装具体怎么操作？

A2：以 shadcn 为例，在官网组件页面复制安装命令（如 npx shadcn@latest add react-bits-button），CLI 会交互式询问项目框架和 CSS 技术栈，自动将组件源码及依赖添加到项目中。部分特效需通过 jsrepo 的 CLI 类似操作。

Q3：React Bits 的许可是否允许商用？

A3：允许。项目采用 MIT + Commons Clause 许可，你可以在商业项目中自由使用和修改代码，但不得将该软件本身作为商品进行销售或直接售卖。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。