Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated componen

Animated Component Libraries Overview This skill provides expertise in pre built animated React component libraries, specifically Magic UI and React Bits. These libraries offer production ready, animated components that significantly accelerate development of modern, interactive web applications. Magic UI provides 150+ TypeScript components built on Tailwind CSS and Framer Motion, designed for seamless integration with shadcn/ui. Components are copy paste ready and highly customizable. React Bits offers 90+ animated React components with minimal dependencies, focusing on visual effects, backgrounds, and micro interactions. Components emphasize performance and ease of customization. Both libraries follow modern React patterns, support TypeScript, and integrate with popular design systems. Core Concepts Magic UI Architecture Magic UI components are built on three foundational technologies: 1. Tailwind CSS : Utility first styling with full customization via tailwind.config.js 2. Framer Motion : Physics based animations and gesture recognition 3. shadcn/ui Integration : Follows shadcn conventions for CLI installation and component structure Installation Methods : Component Structure : React Bits Architecture React Bits emphasizes lightweight, standalone components with minimal dependencies: 1. Self Contained : Each component has minimal external dependencies 2. CSS in JS Optional : Many components use inline styles or CSS modules 3. Performance First : Optimized for 60fps animations 4. WebGL Support : Some components (Particles, Plasma) use WebGL for advanced effects Installation : Component Categories : Text Animations : BlurText, CircularText, CountUp, SpinningText Interactive Elements : MagicButton, Magnet, Dock, Stepper Backgrounds : Aurora, Plasma, Particles Lists & Layouts : AnimatedList, Bento Grid Common Patterns 1. Magic UI: Animated Background Patterns Create dynamic background effects with SVG based patterns: 2. React Bits: Text Reveal Animations Implement scroll triggered text reveals with BlurText: 3. Magic UI: Button Components with Effects Create interactive buttons with shimmer and border beam effects: 4. React Bits: Interactive Dock Navigation Implement macOS style dock with magnification effects: 5. React Bits: Animated Statistics with CountUp Display animated numbers for dashboards and landing pages: 6. Magic UI: Marquee Component for Infinite Scroll Create infinite scrolling content displays: 7. React Bits: WebGL Background Effects Add high performance animated backgrounds: Integration Patterns Integration with shadcn/ui Magic UI components are designed to work seamlessly with shadcn/ui: Utility Function Required ( lib/utils.ts ): Integration with Framer Motion Both libraries leverage Framer Motion for animations: Integration with React Router Combine animated components with routing: Combining Magic UI and React Bits Leverage strengths of both libraries in a single project: Performance Optimization Magic UI Performance Tips 1. Use CSS Masks Instead of Clipping : More performant for large patterns 2. Reduce Animation Complexity : Lower numSquares for AnimatedGridPattern on mobile 3. Lazy Load Components : Use React.lazy for heavy components React Bits Performance Tips 1. WebGL Components : Reduce particle count on low end devices 2. Disable Animations on Reduced Motion : 3. Optimize Marquee Content : Limit items for better performance 4. Use RequestIdleCallback for Non Critical Animations : Common Pitfalls 1. Missing Dependencies Problem : Component breaks due to missing motion or utility functions. Solution : Always install required dependencies and utilities: 2. CSS Animations Not Applied Problem : Magic UI animations don't work after manual installation. Solution : Add required CSS animations to globals.css : 3. Z Index Conflicts Problem : Background patterns or effects cover foreground content. Solution : Use proper z index layering: 4. Performance Issues with Multiple Animated Components Problem : Page lags when multiple heavy animations run simultaneously. Solution : Implement progressive enhancement and conditional rendering: 5. TypeScript Type Errors Problem : TypeScript complains about component props. Solution : Extend proper base types: 6. Tailwind Classes Not Applied Problem : Custom Tailwind classes in Magic UI components don't work. Solution : Ensure content paths include component directory: Resources Official Documentation Magic UI : https://magicui.design React Bits : https://reactbits.dev shadcn/ui : https://ui.shadcn.com Framer Motion : https://motion.dev Key Scripts scripts/component importer.py Import and customize components from both libraries scripts/props generator.py Generate component prop configurations References references/magic ui components.md Complete Magic UI component catalog with usage examples references/react bits components.md React Bits component library reference references/customization guide.md Prop based customization patterns for both libraries Starter Assets assets/component showcase/ Interactive demo of all components assets/examples/ Landing page sections, dashboard widgets, micro interactions Related Skills motion framer : For understanding underlying animation concepts used by both libraries gsap scrolltrigger : Alternative approach for scroll driven animations react spring physics : Alternative physics based animation library threejs webgl : For 3D background effects as alternative to Particles/Plasma

animated-component-libraries