ContextQMD
Back to React Bits

README

README.md

latest7.3 KB
Original Source
<div align="center"> 
<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">
  
</picture>

<strong>The largest & most creative library of animated React components.</strong>

<sub>Stand out with 110+ free, customizable animations for text, backgrounds, and UI.</sub>

<a href="https://github.com/davidhdev/react-bits/stargazers"></a> <a href="https://github.com/davidhdev/react-bits/blob/main/LICENSE.md"></a>

<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> <div align="center"> </div>

✨ 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"> </div> <hr />

Beyond components, React Bits offers free creative tools to supercharge your workflow:

ToolWhat it does
Background StudioExplore animated backgrounds, customize effects, export as video/image/code
Shape MagicCreate inner rounded corners between shapes, export as SVG, React code or clip-path code
Texture LabApply 20+ effects (noise, dithering, ASCII) to images/videos and export in high quality

📦 Installation

React Bits supports shadcn and jsrepo for quick CLI installs.

bash
# 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"> </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"> </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"> </picture> </a> &nbsp;&nbsp;&nbsp; <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"> </picture> </a> &nbsp;&nbsp;&nbsp; <a href="https://shadcnspace.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/shadcnspace.svg"> <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnspace-lightmode.svg"> </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"> </a>

👤 Maintainer

David Haz — creator & lead maintainer

🌐 Official Ports

FrameworkLink
Vue.jsvue-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.