Animated Component Libraries
Pre-built animated React component collections combining Magic UI (150+...
Install
npx skills add freshtechbro/claudedesignskills --skill animated-component-libraries -g -a claude-code -y- Repository
- freshtechbro/claudedesignskills1.2k
- Category
- Design
- Updated
- 12mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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:
- Tailwind CSS: Utility-first styling with full customization via
tailwind.config.js - Framer Motion: Physics-based animations and gesture recognition
- shadcn/ui Integration: Follows shadcn conventions for CLI installation and component structure
Installation Methods:
# 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() utility exists in lib/utils.ts
Component Structure:
// All Magic UI components follow this pattern:
import { cn } from "@/lib/utils"
import { motion } from "motion/react"
interface ComponentProps extends React.ComponentPropsWithoutRef<"div"> {
customProp?: string
className?: string
}
