Magic UI

150+ animated components for SaaS landing pages. Professional polish, production-ready.

When to Use

• Number/stat animations (tickers, counters)

• Logo walls (marquee)

• Bento grid layouts

• Device mockups (iPhone, Safari)

• Text animations (typing, word rotate)

• Shimmer/rainbow buttons

When NOT to Use

• Basic UI → shadcn/ui

• Dramatic hero effects → Aceternity

• State-driven animations → Rive

Process

NEED → ADD → CUSTOMIZE

• Identify component type

• Install: npx magicui-cli@latest add [component]

• Customize props/styles

Dependencies

npm install framer-motion clsx tailwind-merge

Component Categories

Text: number-ticker, typing-animation, word-rotate, flip-text, morphing-text Buttons: shimmer-button, rainbow-button, pulsating-button, shiny-button Patterns: dot-pattern, grid-pattern, retro-grid, particles, meteors Mockups: iphone-15-pro, safari, android Layout: bento-grid, marquee, dock, animated-list, file-tree Effects: orbiting-circles, animated-beam, border-beam, confetti, globe

Decision Tree

Need animated component? ├─ Stats/numbers → number-ticker ├─ Logo carousel → marquee ├─ Feature grid → bento-grid ├─ CTA button → shimmer-button, rainbow-button ├─ App screenshot → safari, iphone-15-pro ├─ Dynamic headline → word-rotate, typing-animation └─ Integration diagram → orbiting-circles, animated-beam

Quick Patterns

// Number Ticker <div className="flex gap-12"> <NumberTicker value={10000} className="text-4xl font-bold" /> <span className="text-4xl">+</span> </div>

// Marquee (logo wall) <Marquee pauseOnHover className="[--duration:20s]"> {logos.map(logo => <img key={logo.name} src={logo.img} />)} </Marquee>

// Word Rotate <h1>Build <WordRotate words={["faster", "better"]} /> apps</h1>

// Safari Mockup <Safari url="yourapp.com" src="/screenshot.png" />

Customization

// Speed via CSS variables <Marquee className="[--duration:40s]">...</Marquee> <NumberTicker className="[--duration:3s]" value={1000} />

// Colors <ShimmerButton shimmerColor="#a855f7" background="linear-gradient(to right, #6366f1, #8b5cf6)"

Custom </ShimmerButton>

// Marquee gap <Marquee className="[--gap:2rem]">...</Marquee>

SSR & Hydration

// Always 'use client' 'use client'

// Heavy components: dynamic import import dynamic from 'next/dynamic' const Globe = dynamic(() => import('@/components/magicui/globe'), { ssr: false })

// Mounted check pattern const [mounted, setMounted] = useState(false) useEffect(() => setMounted(true), []) if (!mounted) return <Skeleton />

Magic UI vs Aceternity

Use Case Magic UI Aceternity

Number animation ✓ NumberTicker ✗

Logo carousel ✓ Marquee ✓ InfiniteMovingCards

Hero spotlight ✗ ✓ Spotlight

Device mockup ✓ Safari/iPhone ✗

3D card tilt ✗ ✓ 3D Card

Rule: Magic UI = polished SaaS, Aceternity = dramatic effects

Troubleshooting

"Component not found": → npx magicui-cli@latest add [name] → Check components/magicui/[name].tsx

"Animation not playing": → Add 'use client' → Check framer-motion installed

"Hydration mismatch": → dynamic(() => ..., { ssr: false })

"Marquee stuttering": → Increase [--duration:Xs] → Use pauseOnHover

References

• components.md — Full component API with all props

External Resources

• https://magicui.design/docs — Documentation

• For latest API → use context7 skill