DavidHDev / react-bits
An open source collection of animated, interactive & fully customizable React components for building memorable websites.
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing DavidHDev/react-bits in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
Preview✨ Why React Bits?
React Bits helps you ship stunning interfaces faster. Instead of spending hours crafting animations from scratch, grab a polished component and customize it to fit your vision.
💬 Text Animations · 🌀 Animations · 🧩 Components · 🖼️ Backgrounds
🚀 Features
- 110+ components — text animations, UI elements, and backgrounds, growing weekly
- Minimal dependencies — lightweight and tree-shakeable
- Fully customizable — tweak everything via props or edit the source directly
- 4 variants per component — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone's happy)
- Copy-paste ready — works with any modern React project
🛠️ Creative Tools
<div align="center"> <img src="src/assets/common/tools-readme.webp" alt="React Bits Tools" width="1000" style="border-radius: 30px; max-width: 1920px;"> </div> <hr />Beyond components, React Bits offers free creative tools to supercharge your workflow:
| Tool | What it does |
|---|---|
| Background Studio | Explore animated backgrounds, customize effects, export as video/image/code |
| Shape Magic | Create inner rounded corners between shapes, export as SVG, React code or clip-path code |
| Texture Lab | Apply 20+ effects (noise, dithering, ASCII) to images/videos and export in high quality |
📦 Installation
React Bits supports shadcn and jsrepo for quick CLI installs.
# Example: Add a component via shadcn
npx shadcn@latest add @react-bits/BlurText-TS-TW
Each component page includes copy-ready CLI commands. See the installation guide for full details.
You can also select your preferred technologies, and copy the code manually.
🚀 Sponsors
React Bits is proudly supported by these amazing sponsors:
Diamond
<a href="https://www.shadcnblocks.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnblocks.svg"> <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnblocks-lightmode.svg"> <img src="public/assets/sponsors/shadcnblocks.svg" alt="shadcnblocks.com" style="height: 50px;"> </picture> </a> <a href="https://shadcnstudio.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnstudio.svg"> <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnstudio-lightmode.svg"> <img src="public/assets/sponsors/shadcnstudio.svg" alt="shadcn studio" style="height: 50px;"> </picture> </a>Silver
<a href="https://nextjsweekly.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/nextjsweekly.svg"> <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/nextjsweekly-lightmode.svg"> <img src="public/assets/sponsors/nextjsweekly.svg" alt="Next.js Weekly" style="height: 40px;"> </picture> </a> <a href="https://shadcraft.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcraft.svg"> <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcraft-lightmode.png"> <img src="public/assets/sponsors/shadcraft.svg" alt="Shadcraft" style="height: 40px;"> </picture> </a> <a href="https://efferd.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/efferd.svg"> <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/efferd-lightmode.svg"> <img src="public/assets/sponsors/efferd.svg" alt="Efferd" style="height: 30px;"> </picture> </a> <hr />Become a sponsor — Get your brand in front of 500K+ developers monthly.
🤝 Contributing
We'd love your help! Check the open issues or submit ideas via the feature request template.
Please read the contribution guide first — thanks for making React Bits better!
🙌 Contributors
<a href="https://github.com/davidhdev/react-bits/graphs/contributors"> <img src="https://contrib.rocks/image?repo=davidhdev/react-bits" /> </a>👤 Maintainer
David Haz — creator & lead maintainer
🌐 Official Ports
| Framework | Link |
|---|---|
| Vue.js | vue-bits.dev |
📊 Stats
🗳️ Credit
React Bits occasionally draws inspiration from publicly available code examples. These are rewritten as full-fledged, customizable components for JS, TS, CSS, and Tailwind. If you recognize your work, open an issue to request credit.
📄 License
MIT + Commons Clause — free for personal and commercial use.