english/.opencode/skills/frontend-design/references/magicui-components.md

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

npx magicui-cli add <component-name>

Component Categories

Text Effects

Component	Description	Docs
Animated Gradient Text	Gradient transitions for text	docs
Animated Shiny Text	Light glare shimmer on text	docs
Aurora Text	Aurora borealis text effect	docs
Comic Text	Comic-style text animation	docs
Hyper Text	Scramble-then-reveal animation	docs
Line Shadow Text	Moving line shadow on text	docs
Morphing Text	Dynamic text morphing	docs
Sparkles Text	Continuous sparkle animation	docs
Spinning Text	Circular motion text	docs
Text Animate	Multiple text animation types	docs
Text Reveal	Fade-in on scroll	docs
Typing Animation	Typewriter effect	docs
Video Text	Video background in text	docs
Word Rotate	Vertical word rotation	docs
Highlighter	Marker-stroke highlight	docs

Buttons

Component	Description	Docs
Shimmer Button	Light travels along perimeter	docs
Shiny Button	Dynamic shiny effect	docs
Pulsating Button	Attention-capturing pulse	docs
Rainbow Button	Rainbow color animation	docs
Ripple Button	Click ripple effect	docs
Interactive Hover Button	Hover interaction	docs

Backgrounds & Patterns

Component	Description	Docs
Grid Pattern	SVG grid, customizable	docs
Animated Grid Pattern	Animated SVG grid	docs
Interactive Grid Pattern	Mouse-interactive grid	docs
Dot Pattern	SVG dots background	docs
Striped Pattern	SVG stripes background	docs
Flickering Grid	Flickering cells grid	docs
Retro Grid	Animated scrolling retro grid	docs
Warp Background	Time-warping effect	docs
Particles	Interactive particle system	docs
Light Rays	Animated light rays from above	docs

Cards & Borders

Component	Description	Docs
Magic Card	Spotlight follows cursor	docs
Neon Gradient Card	Neon glow effect	docs
Border Beam	Animated light along border	docs
Shine Border	Animated shine border	docs

Layout & Navigation

Component	Description	Docs
Bento Grid	Feature showcase grid	docs
Dock	macOS-style dock	docs
Marquee	Infinite scroll (text/images)	docs
File Tree	Directory structure display	docs
Terminal	Terminal mockup	docs

Animated Effects

Component	Description	Docs
Animated Beam	Light beam along path	docs
Animated List	Sequential item animation	docs
Blur Fade	Smooth blur fade-in/out	docs
Confetti	Celebration animations	docs
Cool Mode	Fun click particle effect	docs
Meteors	Meteor shower effect	docs
Number Ticker	Count up/down animation	docs
Orbiting Circles	Orbital motion circles	docs
Ripple	Background ripple emphasis	docs
Scroll Based Velocity	Speed-reactive scroll text	docs
Scroll Progress	Page scroll indicator	docs
Progressive Blur	Blur gradient for scroll	docs
Smooth Cursor	Physics-based cursor	docs
Pointer	Hover pointer indicator	docs

Device Mockups

Component	Description	Docs
Android	Android device mockup	docs
iPhone	iPhone mockup	docs
Safari	Safari browser mockup	docs

Data Display

Component	Description	Docs
Globe	WebGL interactive globe	docs
Icon Cloud	3D interactive tag cloud	docs
Animated Circular Progress	Circular gauge	docs
Dotted Map	Map with dot markers	docs
Pixel Image	Pixelated image effect	docs
Lens	Zoom into images/videos	docs

Social & Media

Component	Description	Docs
Tweet Card	Display tweet embed	docs
Client Tweet Card	Client-side tweet card	docs
Avatar Circles	Overlapping avatar stack	docs
Hero Video Dialog	Video dialog for hero	docs
Code Comparison	Side-by-side code diff	docs
Theme Toggler	Animated theme switch	docs

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