Skip to content

About

The largest open-source library of animated, interactive, and customizable React & Next.js components for building standout web products and experiences. Built for humans and AI agents.

Topics

Resources

Contributing

Stars

48.9k stars

Watchers

149 watching

Forks

Repository files navigation



react-bits logo

The largest & most creative library of animated React components.
Stand out with 200+ free, customizable animations for text, backgrounds, UI, and micro interactions.

GitHub Repo stars License

📖 Documentation · ⚡ Quick Start · 🛠️ Tools

React Bits component showcase

React Bits Pro

React Bits Pro adds premium components, page blocks, app UI, and complete templates for your next project.

React Bits Pro previews: ASCII Ripple, Radial Liquid, Hero 12, and Dashboard 12

✨ 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 · ⚡ Micro · 🖼️ Backgrounds

🚀 Features

  • 200+ components — text animations, UI elements, micro interactions, 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

React Bits Tools

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

shadcnblocks.com shaders.com

Silver

Shadcncraft shadcnuikit.com Shadcn Studio

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

Contributors

👤 Maintainer

David Haz — creator & lead maintainer

🌐 Official Ports

Framework Link
Vue.js vue-bits.dev
Svelte sveltebits.xyz

📊 Stats

Repobeats analytics

🗳️ 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.

About

The largest open-source library of animated, interactive, and customizable React & Next.js components for building standout web products and experiences. Built for humans and AI agents.

Topics

Resources

Contributing

Stars

48.9k stars

Watchers

149 watching

Forks

Sponsor this project

Used by

Contributors

Languages