Magic UI components and templates
Magic UI components come in six families — text effects, backgrounds & patterns, buttons, cards & layout, device mockups, special effects. The official docs currently publish 76 component pages (the library counts 150+ components and variants in total), and every one installs with a single shadcn command. Magic UI templates add 9 full pages (three free, six in Pro) and Magic UI Pro adds 50+ page sections. Below is the whole catalog with a one-line purpose for each component and a link to its official docs page.
Text effects 19 components
Headlines and labels that type, morph, sparkle, flip and rotate.
-
Text Animate
Animate text by character, word or line with presets like blur-in and slide-up.
add @magicui/text-animate -
Typing Animation
Typewriter effect for headlines and terminal-style intros.
add @magicui/typing-animation -
Word Rotate
Cycle through words in place — 'built for designers / developers / founders'.
add @magicui/word-rotate -
Morphing Text
Blur-morph between two or more phrases.
add @magicui/morphing-text -
Aurora Text
Gradient text with a slow aurora sweep.
add @magicui/aurora-text -
Hyper Text
Scramble-to-reveal hover effect for short labels.
add @magicui/hyper-text -
Sparkles Text
Text with drifting sparkle particles.
add @magicui/sparkles-text -
Animated Shiny Text
A shimmer sweep across a badge or line of text.
add @magicui/animated-shiny-text -
Animated Gradient Text
Looping gradient fill for badges and pills.
add @magicui/animated-gradient-text -
Line Shadow Text
Display text with a moving line-pattern shadow behind it.
add @magicui/line-shadow-text -
Comic Text
Bold outlined comic-book lettering.
add @magicui/comic-text -
Spinning Text
Text set on a rotating circle.
add @magicui/spinning-text -
Kinetic Text
Characters change font weight as you hover — kinetic type with no extra animation library.
add @magicui/kinetic-text -
Text 3D Flip
Flip each letter in 3D with a staggered animation on hover.
add @magicui/text-3d-flip -
Dia Text Reveal
A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color.
add @magicui/dia-text-reveal -
Text Reveal
Reveal paragraph text as the user scrolls.
add @magicui/text-reveal -
Scroll Based Velocity
Marquee text whose speed follows scroll velocity.
add @magicui/scroll-based-velocity -
Video Text
Text filled with a playing video.
add @magicui/video-text -
Highlighter
Hand-drawn marker highlight behind inline text.
add @magicui/highlighter
Backgrounds & patterns 15 components
Grids, dots, warps, rays and particles that sit behind heroes and sections.
-
Retro Grid
Perspective grid floor in the classic synthwave style.
add @magicui/retro-grid -
Dot Pattern
Subtle dotted background with optional glow.
add @magicui/dot-pattern -
Grid Pattern
Square grid background with highlighted cells.
add @magicui/grid-pattern -
Animated Grid Pattern
Grid cells that fade in and out.
add @magicui/animated-grid-pattern -
Interactive Grid Pattern
Grid cells that light up under the cursor.
add @magicui/interactive-grid-pattern -
Flickering Grid
Dense grid of flickering squares.
add @magicui/flickering-grid -
Hexagon Pattern
Honeycomb background pattern.
add @magicui/hexagon-pattern -
Striped Pattern
Diagonal stripe texture for banners and cards.
add @magicui/striped-pattern -
Noise Texture
Film-grain overlay for depth.
add @magicui/noise-texture -
Warp Background
A card wrapper with a time-warp beam background behind its content.
add @magicui/warp-background -
Light Rays
Soft volumetric light rays.
add @magicui/light-rays -
Backlight
Glowing backlight behind a card or hero.
add @magicui/backlight -
Particles
Floating particle field, cursor-reactive.
add @magicui/particles -
Meteors
Diagonal shooting-star streaks.
add @magicui/meteors -
Ripple
Concentric ripple rings behind an element.
add @magicui/ripple
Cards & layout 17 components
Bento grids, marquees, docks, file trees, terminals and cards for feature sections.
-
Bento Grid
Responsive feature grid with cards of mixed sizes.
add @magicui/bento-grid -
Marquee
Infinite horizontal or vertical scroll for logos and testimonials.
add @magicui/marquee -
Magic Card
Card with a spotlight border that follows the cursor.
add @magicui/magic-card -
Neon Gradient Card
Card with an animated neon gradient border.
add @magicui/neon-gradient-card -
Tweet Card
Render a real tweet by ID as a styled card.
add @magicui/tweet-card -
Dock
macOS-style dock with magnifying icons.
add @magicui/dock -
File Tree
Collapsible file explorer for docs and demos.
add @magicui/file-tree -
Terminal
Animated terminal window with typed commands.
add @magicui/terminal -
Code Comparison
Before/after code diff panel.
add @magicui/code-comparison -
Animated List
List items that slide in one after another (notifications demo).
add @magicui/animated-list -
Avatar Circles
Overlapping avatars with a '+N' counter.
add @magicui/avatar-circles -
Icon Cloud
Interactive 3D sphere of icons.
add @magicui/icon-cloud -
Orbiting Circles
Icons orbiting a centre point.
add @magicui/orbiting-circles -
Hero Video Dialog
Video thumbnail that opens in an animated dialog.
add @magicui/hero-video-dialog -
Scroll Progress
Thin reading-progress bar at the top of the page.
add @magicui/scroll-progress -
Animated Circular Progress Bar
Ring gauge that counts up.
add @magicui/animated-circular-progress-bar -
Number Ticker
Count-up numbers for stats sections.
add @magicui/number-ticker
Device mockups 3 components
Browser and phone frames for screenshots and demos.
Special effects 16 components
Globes, beams, borders, cursors, reveals and playful extras.
-
Globe
Interactive WebGL globe (cobe) with markers.
add @magicui/globe -
Animated Beam
Light beam travelling between two elements.
add @magicui/animated-beam -
Border Beam
Beam of light running along a card border.
add @magicui/border-beam -
Shine Border
Animated gradient border on any container.
add @magicui/shine-border -
Glare Hover
A diagonal glare sweep on hover, pure CSS with configurable angle, size, duration and color.
add @magicui/glare-hover -
Blur Fade
Blur-in entrance for images and text.
add @magicui/blur-fade -
Confetti
Confetti burst on click or success.
add @magicui/confetti -
Cool Mode
Emoji/particle spray on click.
add @magicui/cool-mode -
Smooth Cursor
Custom cursor with easing.
add @magicui/smooth-cursor -
Pointer
Custom pointer element following the mouse.
add @magicui/pointer -
Lens
Magnifying lens over an image.
add @magicui/lens -
Progressive Blur
Gradient blur edge for scroll containers.
add @magicui/progressive-blur -
Animated Theme Toggler
Light/dark toggle using View Transitions with animated clip-path masks (circle, polygons, star).
add @magicui/animated-theme-toggler -
Dotted Map
World map drawn from dots with markers.
add @magicui/dotted-map -
Pixel Image
Pixelated image that resolves into focus.
add @magicui/pixel-image -
Glyph Matrix
Character-matrix reveal effect (newest addition).
add @magicui/glyph-matrix
Magic UI templates: 9 full pages
Three templates are free (download from the official docs); six ship with Magic UI Pro or as single $49 purchases. All are Next.js + React + Tailwind CSS + Motion.
-
Startup
ProLaunch page for a product or startup: hero, features, pricing, FAQ.
Template docs -
Portfolio
FreePersonal site with projects, skills and contact.
Template docs -
Changelog
FreeProduct updates and releases in a clean timeline.
Template docs -
Blog
FreeMDX blog with generated OG images and SEO metadata.
Template docs -
SaaS
ProConversion-focused SaaS landing page with customizable sections.
Template docs -
AI Agent
ProLanding page for an AI agent or assistant product.
Template docs -
Dev Tool
ProDeveloper-tool marketing site with docs-style sections.
Template docs -
Mobile
ProApp landing page with device mockups and store links.
Template docs -
Codeforge
ProNewest Pro template for developer platforms.
Template docs
Magic UI Pro: 50+ page sections
Pro sections are the blocks between a hero and a footer — the parts
every landing page repeats. Each family comes in numbered variants
(hero-1, hero-2 …) installed with npx shadcn@latest add @magicui-pro/hero-1
once your registry token is set. Pro is $199
one-time payment with lifetime updates.
- Header
- Hero
- Social Proof
- Feature
- Feature Scroll
- Feature Slideshow
- Feature Cards
- Carousel
- Pricing
- Call To Action
- FAQ
- Footer
Is Magic UI good? The facts
- 21k+ GitHub stars, MIT licensed — source
- 150+ free animated components and effects — source
- Trusted by 5,000+ developers (Pro) — source
- Show HN, May 2024 — source
- Used on landing pages by YC-backed startups such as Infisical, Langfuse and Million — source
- The free library is the full component set, so you can judge quality in your own project before paying anything.
magicui.net earns a commission if you buy through this link — at no extra cost to you.