# Animated Component Libraries

Pre-built animated React component collections combining Magic UI (150+...

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Design
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill animated-component-libraries -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill animated-component-libraries -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill animated-component-libraries -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill animated-component-libraries -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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() utility exists in lib/utils.ts
```

**Component Structure**:

```typescript
// 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
}

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/animated-component-libraries/SKILL.md