DavidHDev/react-bits

这是什么？

核心功能

• 01提供 215 个以上动效组件与背景，涵盖文字、交互、卡片和背景等类别。
• 02每个组件都有 JavaScript 或 TypeScript 版本，样式可选 CSS 或 Tailwind。
• 03支持通过 shadcn 或 jsrepo CLI 安装，也可直接复制源码。
• 04通过 shadcn MCP 注册表与 AI 编程助手配合使用。
• 05提供免费的在线工具，用于生成背景、产品效果图、Logo、纹理和音效。

适用场景

• 为营销网站或落地页添加醒目的文字动画和滚动展现效果。
• 在 Next.js 或 React 应用中搭建带动态效果的首屏与整页背景。
• 让 AI 编程助手把现成组件直接引入 Tailwind 项目。
• 为产品发布或演示制作效果图、循环背景视频或界面音效。

快速上手

1. 1

   使用 shadcn CLI 添加组件

   npx shadcn@latest add @react-bits/SplitText-TS-TW
2. 2

   或使用 jsrepo 添加组件

   npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

使用前须知

• !许可证名称包含 Commons Clause 条款，该条款限制出售软件本身，商业使用前请阅读 LICENSE.md。
• !仓库元数据未检测到许可证，因此应直接查看 LICENSE.md 确认许可条款。

标签

常见问题

react-bits 是什么？

面向 React 与 Next.js 的开源动效组件库，提供 215 个以上可定制的动画组件与背景。 React Bits 是一套可交互、带动效的 React 与 Next.js 组件库，适合搭建视觉风格鲜明的网页界面。组件涵盖文字动画（分词动效、打字机、滚动展现）、光标效果、悬停交互、卡片、轮播、微交互控件，以及可用于整屏区域的动态背景。

react-bits 可以免费使用吗？用的什么许可证？

react-bits 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。

react-bits 还在维护吗？

活跃维护中。react-bits 最近一次提交是在 2026年10月19日。

react-bits 适合用来做什么？

为营销网站或落地页添加醒目的文字动画和滚动展现效果。 在 Next.js 或 React 应用中搭建带动态效果的首屏与整页背景。 让 AI 编程助手把现成组件直接引入 Tailwind 项目。 为产品发布或演示制作效果图、循环背景视频或界面音效。

react-bits 怎么安装和运行？

使用 shadcn CLI 添加组件: npx shadcn@latest add @react-bits/SplitText-TS-TW 或使用 jsrepo 添加组件: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

在哪里获取 react-bits？

源代码和安装说明在 GitHub 上：https://github.com/DavidHDev/react-bits