animated-component-librarieslisted

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 components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP.
AnimaEcho/dstack · ★ 0 · Web & Frontend · score 67

Install: claude install-skill AnimaEcho/dstack

# 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**: ```bash # Via shadcn CLI (recommended) npx shadcn@latest add https://magicui.design/r/animated-beam # Manual installation # 1. Copy component code to components/ui/ # 2. Install motion: npm install motion # 3. Add required CSS animations to globals.css # 4. Ensure cn() utilit