Repository: DavidHDev/react-bits

Stars: 38353

README.md Copy Chapter

<div align="center">
<br>
<br>
<picture>
<source media="(prefers-color-scheme: light)" srcset="src/assets/logos/reactbits-gh-black.svg">
<source media="(prefers-color-scheme: dark)" srcset="src/assets/logos/reactbits-gh-white.svg">
<img src="src/assets/logos/reactbits-gh-black.svg" alt="react-bits logo" width="600">
</picture>
<br>
<br>
<strong>The largest & most creative library of animated React components.</strong>
<br />
_{Stand out with 110+ free, customizable animations for text, backgrounds, and UI.}
<br>
<br>
<a href="https://github.com/davidhdev/react-bits/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/davidhdev/react-bits"></a>
<a href="https://github.com/davidhdev/react-bits/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/badge/License-MIT+Commons_Clause-magenta"></a>
<br>
<br>
<a href="https://reactbits.dev/">📖 Documentation</a> · <a href="https://reactbits.dev/get-started/installation">⚡ Quick Start</a> · <a href="https://reactbits.dev/tools">🛠️ Tools</a>
</div>

<br />

<div align="center">
<img src="src/assets/common/readme-showcase.png" alt="React Bits component showcase" width="1000">
</div>

<br />

✨ Why React Bits? Copy Chapter

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 Copy Chapter

- 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 Copy Chapter

<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: Copy Section

| 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 Copy Chapter

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 Copy Chapter

React Bits is proudly supported by these amazing sponsors:

Diamond Copy Section

<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>
&nbsp;&nbsp;&nbsp;
<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>

Platinum Copy Section

<a href="https://pro.tailark.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=platinum&ref=reactbits" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/tailark.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/tailark-lightmode.svg">
<img src="public/assets/sponsors/tailark.svg" alt="Tailark" style="height: 50px;">
</picture>
</a>

Silver Copy Section

<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>
&nbsp;&nbsp;&nbsp;
<a href="https://shadcncraft.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/shadcncraft.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcncraft-lightmode.svg">
<img src="public/assets/sponsors/shadcncraft.svg" alt="Shadcncraft" style="height: 40px;">
</picture>
</a>

<hr />

Become a sponsor — Get your brand in front of 500K+ developers monthly.

🤝 Contributing Copy Chapter

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 Copy Chapter

<a href="https://github.com/davidhdev/react-bits/graphs/contributors">
<img src="https://contrib.rocks/image?repo=davidhdev/react-bits" />
</a>

👤 Maintainer Copy Chapter

David Haz — creator & lead maintainer

🌐 Official Ports Copy Chapter

| Framework | Link |
| --------- | ------------------------------------- |
| Vue.js | vue-bits.dev |

📊 Stats Copy Chapter

!Repobeats analytics

🗳️ Credit Copy Chapter

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 Copy Chapter

MIT + Commons Clause — free for personal and commercial use.