react-bits:基于 React 生态的组件与动画库项目

React Bits Pro

React Bits Pro 为你的下一个项目提供高级组件、页面模块、应用 UI 和完整模板。

✨ 为什么选择 React Bits？

React Bits 能帮助你更快交付惊艳界面。无需花费数小时从零打造动画，只需选用一个精致组件，并依照你的想法进行定制。

💬 文字动画 · 🌀 动画 · 🧩 组件 · ⚡ 微交互 · 🖼️ 背景

🚀 特性

• 200+ 组件 — 文字动画、UI 元素、微交互和背景，每周持续新增
• 依赖极少 — 轻量且支持 Tree Shaking
• 完全可定制 — 通过 props 调整所有细节，或直接编辑源码
• 每个组件 4 种变体 — JS-CSS、JS-TW、TS-CSS、TS-TW（总有一款适合你）
• 即拷即用 — 兼容任何现代 React 项目

🛠️ 创意工具

---

除组件之外，React Bits 还提供免费创意工具，为你的工作流全面提速：

工具	功能说明
Background Studio	探索动态背景，自定义特效，并导出为视频、图片或代码
Shape Magic	在形状之间创建内侧圆角，并导出为 SVG、React 代码或 clip-path 代码
Texture Lab	为图片或视频添加 20 余种效果（噪点、抖动、ASCII），支持高质量导出

📦 安装

React Bits 支持 shadcn 和 jsrepo，用于快速 CLI 安装。

# Example: Add a component via shadcn
npx shadcn@latest add @react-bits/BlurText-TS-TW

每个组件页面都提供可直接复制的 CLI 命令。完整说明请参见安装指南。

你也可以选择偏好的技术栈，并手动复制代码。

🚀 赞助商

React Bits 荣幸地获得以下优秀赞助商的支持：

钻石

白银

---

成为赞助商 — 让您的品牌每月触达 50 万+ 开发者。

🤝 参与贡献

我们期待您的帮助！请查看开放问题，或通过功能请求模板提交想法。

请先阅读贡献指南 — 感谢您让 React Bits 变得更好！

🙌 贡献者

👤 维护者

David Haz — 创建者兼主要维护者

🌐 官方移植版

框架	链接
Vue.js	vue-bits.dev
Svelte	sveltebits.xyz

📊 数据统计

🗳️ 署名

React Bits 偶尔会从公开可用的代码示例中汲取灵感，并将它们重写为适用于 JS、TS、CSS 和 Tailwind 的功能完整、可定制组件。如果您认出自己的作品，请提交 issue请求署名。

📄 许可证

MIT + Commons Clause — 可免费用于个人和商业用途。