React Bits
170+ highly customizable animated React components and backgrounds you copy straight into your project.
Try it now
GPT-4oWhat is React Bits?
React Bits is an open-source library of animated React components and backgrounds for creative developers — backgrounds, text effects, animations and creative UI pieces such as Aurora, Dot Field, Blob Cursor, Ribbons, Split Text and Dock. Instead of installing a wrapper package, each component's real source (built on ogl, GSAP and Three.js) is copied into your repo with one shadcn/jsrepo command, so you own and can edit every line. Every component ships in four flavors — JavaScript or TypeScript, CSS or Tailwind — and works with Vite, Next.js, Astro and Remix. The free library has 170+ components and stays free forever; React Bits Pro adds more components, page blocks, app UI blocks, full Next.js templates and an AI agent kit. It has grown to 46K+ GitHub stars and is documented with ready-to-use prompts for Cursor, GitHub Copilot and v0.
Pros
- Source is yours — no wrapper library, no lock-in, keeps working if the site disappears
- Exceptional visual/animation quality, praised by shadcn and popular OSS authors
- Consistent four-stack variants make it drop into almost any React setup
- Free tier is genuinely free and open source (46K+ GitHub stars)
- AI-ready: a SKILL.md teaches agents to install the right piece instead of guessing
Cons
- React-only — does not drop into Vue, Svelte or Angular as-is
- Animated/WebGL pieces need performance care on low-end mobile devices
- Pro advanced blocks, templates and agent kit are paid
- Designing a coherent page still requires taste; components are building blocks, not full sites on the free tier
Capabilities
Compare with Alternatives
| Feature | React Bits | 21st.dev | PropertySurvey Pro | Remindion |
|---|---|---|---|---|
| Rating | 4.8 | 4.8 | 4.8 | 4.6 |
| Pricing | Freemium | Freemium | Freemium | Freemium |
| Starting From | Free | 16 | Free / Paid | Free / Paid |
| API | — | — | — | — |
| Free Tier | — | — | — | — |
| Mobile App | — | — | — | — |
Who is it for
Frontend Developers
Drop polished animated backgrounds and micro-interactions into React apps without writing WebGL from scratch.
Design Engineers
Prototype memorable landing pages with text effects, custom cursors and shader backgrounds.
Indie Hackers & SaaS
Ship a distinctive marketing site fast using copy-in source components they fully own and edit.
Agencies & Freelancers
Deliver many client projects from one license with components that restyle to any brand.
AI-Assisted Coders
Give Cursor, Copilot or v0 the bundled SKILL.md so agents install the correct animated component.