Library

Magic UI

Component library (~150 animated components) is free MIT. Magic UI Pro is a separate product — sells pre-built page templates (landing pages, dashboards) at $99-199 each, one-time purchase. Not required for the components themselves.

https://magicui.design · Free core · Pro templates $99-199 one-time · 20 components installed

Magic Card

Card with mouse-following gradient.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/magic-card.json

Source: apps/catalog/components/ui/magic-card.tsx

Rainbow Button

Animated rainbow gradient button.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/rainbow-button.json

Source: apps/catalog/components/ui/rainbow-button.tsx

Shimmer Button

Button with shimmer animation.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/shimmer-button.json

Source: apps/catalog/components/ui/shimmer-button.tsx

Animated Shiny Text

Text with shiny sweep animation.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/animated-shiny-text.json

Source: apps/catalog/components/ui/animated-shiny-text.tsx

Animated List

List items that animate in.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/animated-list.json

Source: apps/catalog/components/ui/animated-list.tsx

Marquee

Scrolling marquee.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/marquee.json

Source: apps/catalog/components/ui/marquee.tsx

Ripple

Concentric ripple background.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/ripple.json

Source: apps/catalog/components/ui/ripple.tsx

Confetti

Confetti animation trigger.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/confetti.json

Source: apps/catalog/components/ui/confetti.tsx

Sparkles Text

Text with sparkles overlay.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/sparkles-text.json

Source: apps/catalog/components/ui/sparkles-text.tsx

Number Ticker

Number that counts up.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/number-ticker.json

Source: apps/catalog/components/ui/number-ticker.tsx

Border Beam

Animated beam tracing the border.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/border-beam.json

Source: apps/catalog/components/ui/border-beam.tsx

Animated Gradient Text

Text with animated gradient.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/animated-gradient-text.json

Source: apps/catalog/components/ui/animated-gradient-text.tsx

Avatar Circles

Stacked overlapping avatars.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/avatar-circles.json

Source: apps/catalog/components/ui/avatar-circles.tsx

Dot Pattern

Dot grid background pattern.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/dot-pattern.json

Source: apps/catalog/components/ui/dot-pattern.tsx

Meteors

Falling meteors.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/meteors.json

Source: apps/catalog/components/ui/meteors.tsx

Particles

Particle field background.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/particles.json

Source: apps/catalog/components/ui/particles.tsx

Text Reveal

Text reveals as you scroll.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/text-reveal.json

Source: apps/catalog/components/ui/text-reveal.tsx

Word Rotate

Words rotating in a list.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/word-rotate.json

Source: apps/catalog/components/ui/word-rotate.tsx

Icon Cloud

3D rotating icon cloud.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/icon-cloud.json

Source: apps/catalog/components/ui/icon-cloud.tsx

Animated Beam

Animated beam between two points.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://magicui.design/r/animated-beam.json

Source: apps/catalog/components/ui/animated-beam.tsx