The largest & most creative library of animated React components

🌐 Website • 🚀 Quick Start • 📦 Components • 💻 Installation • 🤝 Contributing

---

🎯 About

React Bits is a comprehensive collection of 110+ animated React components designed to help developers create stunning, interactive web experiences. Our components span four main categories and are built with performance, customization, and developer experience in mind.

✨ What Makes React Bits Special?

• 🎨 Creative Animations: From subtle micro-interactions to eye-catching effects
• 🔧 Highly Customizable: Every component comes with extensive prop options
• 📱 Responsive Design: Built to work seamlessly across all devices
• ⚡ Performance Optimized: Minimal dependencies and optimized rendering
• 🎭 Multiple Variants: Choose from 4 different implementation styles

🚀 Quick Start

Get started with React Bits in seconds:

# Using shadcn/ui
npx shadcn@latest add "https://reactbits.dev/r/component-name"

# Using jsrepo
npx jsrepo add github/sh20raj/react-bits/component-name

Visit reactbits.dev to explore all components with live previews and copy-paste ready code.

📦 Component Categories

🎬 Animations Interactive animations and effects Blob Cursor Animated Content Scroll Animations Hover Effects	🌈 Backgrounds Dynamic and animated backgrounds Aurora Effects Particle Systems Gradient Animations 3D Scenes
🧩 Components Interactive UI components Animated Lists Card Components Navigation Menus Galleries	✍️ Text Animations Engaging text effects and typography Typewriter Effects Blur Animations Morphing Text 3D Text Effects

💻 Installation

Method 1: CLI Installation (Recommended)

React Bits supports both shadcn/ui and jsrepo for seamless component installation:

Using shadcn/ui

npx shadcn@latest add "https://reactbits.dev/r/animated-list"

Using jsrepo

npx jsrepo add github/sh20raj/react-bits/animated-list

Method 2: Manual Installation

1. Browse components at reactbits.dev
2. Copy the component code
3. Install required dependencies
4. Paste into your project

🎨 Component Variants

Every component comes in 4 variants to match your project setup:

Variant	Description	Best For
JS-CSS	JavaScript + CSS Modules	Traditional React projects
JS-TW	JavaScript + Tailwind CSS	Modern styling workflow
TS-CSS	TypeScript + CSS Modules	Type-safe traditional projects
TS-TW	TypeScript + Tailwind CSS	Modern type-safe projects

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn

Local Setup

# Clone the repository
git clone https://github.com/sh20raj/react-bits.git
cd react-bits

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── content/          # JS-CSS components
├── tailwind/         # JS-TW components  
├── ts-default/       # TS-CSS components
├── ts-tailwind/      # TS-TW components
├── demo/            # Component demos
├── components/      # App components
└── assets/          # Static assets

🤝 Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

• 🐛 Report Bugs: Found an issue? Open a bug report
• 💡 Request Features: Have an idea? Submit a feature request
• 🔧 Submit Code: Check our open issues for tasks
• 📖 Improve Docs: Help us make the documentation better

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-component
3. Commit your changes: git commit -m 'Add amazing component'
4. Push to the branch: git push origin feature/amazing-component
5. Open a Pull Request

Please read our Contributing Guide for detailed guidelines.

📊 Project Stats

🌟 Community & Support

💬 Discussions • 🐛 Issues • 🐦 Twitter

🚀 Official Ports

• Vue.js: vue-bits.dev

👥 Contributors

Thanks to all our amazing contributors!

🎖️ Maintainers

• Shaswat Raj - Creator & Lead Maintainer

💝 Sponsorship

Support React Bits development:

• ⭐ Star this repository
• 🐛 Report bugs and suggest features
• 💰 Sponsor the project (funds go towards hosting costs)

📄 License

React Bits is licensed under the MIT + Commons Clause License.

What this means:

• ✅ Free for personal and commercial use
• ✅ Modify and distribute
• ❌ Cannot sell the library itself

🙏 Acknowledgments

React Bits draws inspiration from the amazing React community. We give credit where it's due and encourage you to reach out if you recognize your work.

---

Made with ❤️ by the React Bits community

🌐 Visit reactbits.dev