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

最大且最具创意的动画 React 组件库。
_{使用 200+ 个免费、可自定义的动画，让文本、背景、UI 和微交互脱颖而出。}



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

✨ 为什么选择 React Bits？

React Bits 助你更快交付惊艳界面。无需花数小时从零开始制作动画，直接选用精致组件，并按你的设想进行定制。

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

🚀 功能特性

• 200+ 个组件 — 文本动画、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 由以下出色的赞助商鼎力支持：

钻石

白银

成为赞助商 — 让你的品牌每月触达 500K+ 开发者。

🤝 参与贡献

我们非常欢迎你的帮助！请查看开放的 issues，或通过功能请求模板提交你的想法。

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

🙌 贡献者

👤 维护者

David Haz — 创始人 & 主要维护者

🌐 官方移植

📊 数据统计

🗳️ 鸣谢

React Bits 偶尔会从公开可用的代码示例中汲取灵感，并将其重写为完整的、可定制的组件，支持 JS、TS、CSS 和 Tailwind。如果您认为其中包含您的作品，请 提交 issue 申请署名。

📄 许可证

MIT + Commons Clause — 可自由用于个人和商业用途。