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

规模最大、最具创意的 React 动画组件库。
_{165+ 个免费且可自由定制的动画组件，覆盖文本、背景与 UI，助您脱颖而出。}



📖 文档 · ⚡ 快速开始 · 🛠️ 工具

✨ 为什么选择 React Bits？

React Bits 帮助您更快地打造令人惊艳的界面。无需花费数小时从头编写动画，直接挑选精致组件并随心定制，即可完美契合您的设计构想。

💬 文本动画 · 🌀 动画效果 · 🧩 功能组件 · 🖼️ 背景特效

🚀 特性亮点

• 165+ 个组件 — 涵盖文本动画、UI 元素和背景特效，每周持续更新
• 极简依赖 — 轻量级设计，支持 tree-shaking，按需引入
• 完全可定制 — 通过 props 灵活调整，或直接修改源码，一切尽在掌握
• 每种组件提供 4 个版本 — JS-CSS、JS-TW、TS-CSS、TS-TW（满足不同偏好）
• 即取即用 — 兼容任何现代 React 项目，复制粘贴即可运行

🛠️ 创意工具

超越组件本身，React Bits 提供免费创意工具，助您大幅提升工作效率：

📦 安装方式

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 — 创始人及首席维护者

🌐 官方移植版本

📊 数据统计

🗳️ 致谢

React Bits 偶尔会从公开的代码示例中汲取灵感。这些示例会被重写为功能完整、可自定义的组件，支持 JS、TS、CSS 和 Tailwind。如果您认出了自己的作品，欢迎提交 issue 以申请署名。

📄 许可证

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