Development · Website
React Bits
Open-source animated and interactive React UI components and backgrounds
React Bits is a collection of over 200 animated, interactive React components, text effects, and shader backgrounds. Instead of acting as an external dependency, components are copied directly into your codebase via CLI or copy-paste with full source access. It includes visual editors to tune parameters before exporting to JS, TS, CSS, or Tailwind.
What it's for
- Add animated background shaders or particle effects to landing pages
- Integrate interactive text animations like glitch or split text into hero sections
- Drop pre-built physics micro-interactions and creative UI elements into React apps
- Customize animation parameters visually before copying the component code
Features
- Over 210 animated components, backgrounds, text effects, and micro-interactions
- Direct source code ownership with no wrapper library dependencies
- Four-way flavor support for JavaScript, TypeScript, CSS, and Tailwind CSS
- shadcn CLI integration for single-command component installation
- Interactive visual playground with real-time parameter sliders
- AI-friendly documentation ready for Cursor, Copilot, and v0 prompts
- Broad framework compatibility with Vite, Next.js, Astro, and Remix
Pricing
Freemium. Core library is free and open-source; React Bits Pro offers paid blocks, app UI, and templates.
Details
- Type
- Website
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Web, Code library
- For
- Frontend React developers and creative designers wanting ready-to-use animations.
- Alternative to
- Aceternity UI, Magic UI
- Tags
- react, ui library, animations, components, tailwind, shaders
Why it was saved
- @techinsixty: Saves developers from building complex animations, physics-based UI elements, and interactive text effects from scratch.
- @orcdev: A go-to source of ready-made, eye-catching UI animations to drop into product sites: animated backgrounds, text effects, buttons, shaders.
- @orcdev: Clone or star for source code of the components.
- @davidhaz: It is a ready-made, click-to-morph glass object for hero sections and landing pages: refractive 3D that reacts to the cursor and swaps shape, with the code viewable and copyable straight from the demo page.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Animated React and Tailwind UI components designed for landing pages
Updated