animated-component-libraries

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:

# 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
}

export function MagicComponent({ className, customProp, ...props }: ComponentProps) {
  return (
    <motion.div
      className={cn("base-styles", className)}
      {...props}
    >
      {/* Component content */}
    </motion.div>
  )
}