# Magic UI - Component Library Reference

> Beautifully designed landing page components built with React & Tailwind CSS. 80+ components.
> Docs: https://magicui.design | Repo: https://github.com/magicuidesign/magicui

## Installation

```bash
npx magicui-cli add <component-name>
```

## Component Categories

### Text Effects
| Component | Description | Docs |
|-----------|-------------|------|
| Animated Gradient Text | Gradient transitions for text | [docs](https://magicui.design/docs/components/animated-gradient-text) |
| Animated Shiny Text | Light glare shimmer on text | [docs](https://magicui.design/docs/components/animated-shiny-text) |
| Aurora Text | Aurora borealis text effect | [docs](https://magicui.design/docs/components/aurora-text) |
| Comic Text | Comic-style text animation | [docs](https://magicui.design/docs/components/comic-text) |
| Hyper Text | Scramble-then-reveal animation | [docs](https://magicui.design/docs/components/hyper-text) |
| Line Shadow Text | Moving line shadow on text | [docs](https://magicui.design/docs/components/line-shadow-text) |
| Morphing Text | Dynamic text morphing | [docs](https://magicui.design/docs/components/morphing-text) |
| Sparkles Text | Continuous sparkle animation | [docs](https://magicui.design/docs/components/sparkles-text) |
| Spinning Text | Circular motion text | [docs](https://magicui.design/docs/components/spinning-text) |
| Text Animate | Multiple text animation types | [docs](https://magicui.design/docs/components/text-animate) |
| Text Reveal | Fade-in on scroll | [docs](https://magicui.design/docs/components/text-reveal) |
| Typing Animation | Typewriter effect | [docs](https://magicui.design/docs/components/typing-animation) |
| Video Text | Video background in text | [docs](https://magicui.design/docs/components/video-text) |
| Word Rotate | Vertical word rotation | [docs](https://magicui.design/docs/components/word-rotate) |
| Highlighter | Marker-stroke highlight | [docs](https://magicui.design/docs/components/highlighter) |

### Buttons
| Component | Description | Docs |
|-----------|-------------|------|
| Shimmer Button | Light travels along perimeter | [docs](https://magicui.design/docs/components/shimmer-button) |
| Shiny Button | Dynamic shiny effect | [docs](https://magicui.design/docs/components/shiny-button) |
| Pulsating Button | Attention-capturing pulse | [docs](https://magicui.design/docs/components/pulsating-button) |
| Rainbow Button | Rainbow color animation | [docs](https://magicui.design/docs/components/rainbow-button) |
| Ripple Button | Click ripple effect | [docs](https://magicui.design/docs/components/ripple-button) |
| Interactive Hover Button | Hover interaction | [docs](https://magicui.design/docs/components/interactive-hover-button) |

### Backgrounds & Patterns
| Component | Description | Docs |
|-----------|-------------|------|
| Grid Pattern | SVG grid, customizable | [docs](https://magicui.design/docs/components/grid-pattern) |
| Animated Grid Pattern | Animated SVG grid | [docs](https://magicui.design/docs/components/animated-grid-pattern) |
| Interactive Grid Pattern | Mouse-interactive grid | [docs](https://magicui.design/docs/components/interactive-grid-pattern) |
| Dot Pattern | SVG dots background | [docs](https://magicui.design/docs/components/dot-pattern) |
| Striped Pattern | SVG stripes background | [docs](https://magicui.design/docs/components/striped-pattern) |
| Flickering Grid | Flickering cells grid | [docs](https://magicui.design/docs/components/flickering-grid) |
| Retro Grid | Animated scrolling retro grid | [docs](https://magicui.design/docs/components/retro-grid) |
| Warp Background | Time-warping effect | [docs](https://magicui.design/docs/components/warp-background) |
| Particles | Interactive particle system | [docs](https://magicui.design/docs/components/particles) |
| Light Rays | Animated light rays from above | [docs](https://magicui.design/docs/components/light-rays) |

### Cards & Borders
| Component | Description | Docs |
|-----------|-------------|------|
| Magic Card | Spotlight follows cursor | [docs](https://magicui.design/docs/components/magic-card) |
| Neon Gradient Card | Neon glow effect | [docs](https://magicui.design/docs/components/neon-gradient-card) |
| Border Beam | Animated light along border | [docs](https://magicui.design/docs/components/border-beam) |
| Shine Border | Animated shine border | [docs](https://magicui.design/docs/components/shine-border) |

### Layout & Navigation
| Component | Description | Docs |
|-----------|-------------|------|
| Bento Grid | Feature showcase grid | [docs](https://magicui.design/docs/components/bento-grid) |
| Dock | macOS-style dock | [docs](https://magicui.design/docs/components/dock) |
| Marquee | Infinite scroll (text/images) | [docs](https://magicui.design/docs/components/marquee) |
| File Tree | Directory structure display | [docs](https://magicui.design/docs/components/file-tree) |
| Terminal | Terminal mockup | [docs](https://magicui.design/docs/components/terminal) |

### Animated Effects
| Component | Description | Docs |
|-----------|-------------|------|
| Animated Beam | Light beam along path | [docs](https://magicui.design/docs/components/animated-beam) |
| Animated List | Sequential item animation | [docs](https://magicui.design/docs/components/animated-list) |
| Blur Fade | Smooth blur fade-in/out | [docs](https://magicui.design/docs/components/blur-fade) |
| Confetti | Celebration animations | [docs](https://magicui.design/docs/components/confetti) |
| Cool Mode | Fun click particle effect | [docs](https://magicui.design/docs/components/cool-mode) |
| Meteors | Meteor shower effect | [docs](https://magicui.design/docs/components/meteors) |
| Number Ticker | Count up/down animation | [docs](https://magicui.design/docs/components/number-ticker) |
| Orbiting Circles | Orbital motion circles | [docs](https://magicui.design/docs/components/orbiting-circles) |
| Ripple | Background ripple emphasis | [docs](https://magicui.design/docs/components/ripple) |
| Scroll Based Velocity | Speed-reactive scroll text | [docs](https://magicui.design/docs/components/scroll-based-velocity) |
| Scroll Progress | Page scroll indicator | [docs](https://magicui.design/docs/components/scroll-progress) |
| Progressive Blur | Blur gradient for scroll | [docs](https://magicui.design/docs/components/progressive-blur) |
| Smooth Cursor | Physics-based cursor | [docs](https://magicui.design/docs/components/smooth-cursor) |
| Pointer | Hover pointer indicator | [docs](https://magicui.design/docs/components/pointer) |

### Device Mockups
| Component | Description | Docs |
|-----------|-------------|------|
| Android | Android device mockup | [docs](https://magicui.design/docs/components/android) |
| iPhone | iPhone mockup | [docs](https://magicui.design/docs/components/iphone) |
| Safari | Safari browser mockup | [docs](https://magicui.design/docs/components/safari) |

### Data Display
| Component | Description | Docs |
|-----------|-------------|------|
| Globe | WebGL interactive globe | [docs](https://magicui.design/docs/components/globe) |
| Icon Cloud | 3D interactive tag cloud | [docs](https://magicui.design/docs/components/icon-cloud) |
| Animated Circular Progress | Circular gauge | [docs](https://magicui.design/docs/components/animated-circular-progress-bar) |
| Dotted Map | Map with dot markers | [docs](https://magicui.design/docs/components/dotted-map) |
| Pixel Image | Pixelated image effect | [docs](https://magicui.design/docs/components/pixel-image) |
| Lens | Zoom into images/videos | [docs](https://magicui.design/docs/components/lens) |

### Social & Media
| Component | Description | Docs |
|-----------|-------------|------|
| Tweet Card | Display tweet embed | [docs](https://magicui.design/docs/components/tweet-card) |
| Client Tweet Card | Client-side tweet card | [docs](https://magicui.design/docs/components/client-tweet-card) |
| Avatar Circles | Overlapping avatar stack | [docs](https://magicui.design/docs/components/avatar-circles) |
| Hero Video Dialog | Video dialog for hero | [docs](https://magicui.design/docs/components/hero-video-dialog) |
| Code Comparison | Side-by-side code diff | [docs](https://magicui.design/docs/components/code-comparison) |
| Theme Toggler | Animated theme switch | [docs](https://magicui.design/docs/components/animated-theme-toggler) |

## Usage Pattern

For docs lookup, use `docs-seeker` skill with Context7:
```
context7 query: "magicui <component-name> usage example"
```

For source code examples, fetch from GitHub:
```
https://github.com/magicuidesign/magicui/blob/main/example/<component>-demo.tsx
```