M
magicuidesign
/
magicui
/
examples
Files
Code
Info
Android Demo
android-demo
Example showing a mockup of an Android device.
Android Demo 2
android-demo-2
Second example showing a mockup of an Android device.
Android Demo 3
android-demo-3
Third example showing a mockup of an Android device.
Animated Beam Bidirectional
animated-beam-bidirectional
Example showing a bidirectional animated beam effect.
Animated Beam Demo
animated-beam-demo
Example showing an animated beam of light effect.
Animated Beam Multiple Inputs
animated-beam-multiple-inputs
Example showing animated beams with multiple input points.
Animated Beam Multiple Outputs
animated-beam-multiple-outputs
Example showing animated beams with multiple output points.
Animated Beam Unidirectional
animated-beam-unidirectional
Example showing a unidirectional animated beam effect.
Animated Circular Progress Bar Demo
animated-circular-progress-bar-demo
Example showing an animated circular progress gauge.
Animated Gradient Text Demo
animated-gradient-text-demo
Example showing text with animated gradient backgrounds.
Animated Gradient Text Demo 2
animated-gradient-text-demo-2
Second example showing text with animated gradient backgrounds.
Animated Grid Pattern Demo
animated-grid-pattern-demo
Example showing an animated grid pattern background.
Animated List Demo
animated-list-demo
Example showing a list with sequenced item animations.
Animated Shiny Text Demo
animated-shiny-text-demo
Example showing text with a shimmering light effect.
Animated Theme Toggler Demo
animated-theme-toggler-demo
Example showing animation while changing the theme.
Aurora Text Demo
aurora-text-demo
Example showing a beautiful aurora text effect.
Avatar Circles Demo
avatar-circles-demo
Example showing overlapping avatar circles.
Bento Demo
bento-demo
Example showing a bento grid layout for showcasing features.
Bento Vertical Demo
bento-demo-vertical
Example showing a vertical bento grid layout.
Blur Fade Demo
blur-fade-demo
Example showing blur fade in and out animations.
Blur Fade Text Demo
blur-fade-text-demo
Example showing blur fade animations with text.
Border Beam Demo
border-beam-demo
Example showing an animated border beam effect.
Border Beam Demo
border-beam-demo-2
Example showing an animated border beam effect.
Border Beam Demo 3
border-beam-demo-3
Example showing an animated border beam effect.
Border Beam Demo 4
border-beam-demo-4
Example showing an animated border beam effect.
Code Comparison Demo
code-comparison-demo
Example showing a component which compares two code snippets.
Comic Text Demo
comic-text-demo
Example showing comic text animation.
Confetti Basic Cannon
confetti-basic-cannon
Example showing basic confetti cannon animation.
Confetti Custom Shapes
confetti-custom-shapes
Example showing confetti with custom shape particles.
Confetti Demo
confetti-demo
Example showing confetti animations for celebrations.
Confetti Emoji
confetti-emoji
Example showing confetti with emoji particles.
Confetti Fireworks
confetti-fireworks
Example showing fireworks-style confetti animation.
Confetti Random Direction
confetti-random-direction
Example showing confetti with random directions.
Confetti Side Cannons
confetti-side-cannons
Example showing side-mounted confetti cannons.
Confetti Stars
confetti-stars
Example showing star-shaped confetti animation.
Cool Mode Custom
cool-mode-custom
Example showing customized cool mode effects.
Cool Mode Demo
cool-mode-demo
Example showing cool mode effect for buttons and links.
Dock Demo
dock-demo
Example showing a MacOS-style dock implementation.
Dock Demo 2
dock-demo-2
Second example showing a MacOS-style dock implementation.
Dock Demo 3
dock-demo-3
Third example showing a MacOS-style dock implementation.
Dot Pattern Demo
dot-pattern-demo
Example showing a background dot pattern made with SVGs.
Dot Pattern Linear Gradient
dot-pattern-linear-gradient
Example showing a dot pattern with linear gradient effects.
Dot Pattern with glow effect
dot-pattern-with-glow-effect
Example showing a dot pattern with glow effect
Dotted Map Demo
dotted-map-demo
Example showing a dotted map.
Dotted Map Demo 2
dotted-map-demo-2
Example showing a dotted map.
File Tree Demo
file-tree-demo
Example showing a component that displays folder and file structure.
Flickering Grid Demo
flickering-grid-demo
Example showing a flickering grid background.
Flickering Grid Rounded Demo
flickering-grid-rounded-demo
Example showing a flickering grid background with rounded corners.
Globe Demo
globe-demo
Example showing an autorotating, interactive WebGL globe.
Grid Pattern Dashed
grid-pattern-dashed
Example showing a dashed grid pattern.
Grid Pattern Demo
grid-pattern-demo
Example showing a background grid pattern made with SVGs.
Grid Pattern Linear Gradient
grid-pattern-linear-gradient
Example showing a grid pattern with linear gradient effects.
Hero Video Dialog Demo
hero-video-dialog-demo
Example showing a hero video dialog component.
Hero Video Dialog Top In Bottom Out Demo
hero-video-dialog-demo-top-in-bottom-out
Example showing a hero video dialog with top-in bottom-out animation.
Highlighter Demo
highlighter-demo
Example showing the demo of a Highlighter
Hyper Text Demo
hyper-text-demo
Example showing text with scrambling letter animations.
Icon Cloud Demo
icon-cloud-demo
Example showing an interactive 3D icon cloud.
Icon Cloud Demo 2
icon-cloud-demo-2
Second example showing an interactive 3D icon cloud.
Icon Cloud Demo 3
icon-cloud-demo-3
Third example showing an interactive 3D icon cloud.
Interactive Grid Pattern Demo
interactive-grid-pattern-demo
Example showing an interactive grid pattern background.
Interactive Grid Pattern Demo 2
interactive-grid-pattern-demo-2
Second example showing an interactive grid pattern background.
Interactive Hover Button Demo
interactive-hover-button-demo
Example showing an interactive button with hover effects.
iPhone Demo
iphone-demo
Example showing an iPhone mockup.
iPhone Demo 2
iphone-demo-2
Second example showing an iPhone mockup.
iPhone Demo 3
iphone-demo-3
Third example showing an iPhone mockup.
Lens Demo
lens-demo
Example showing a lens effect component
Lens Demo 2
lens-demo-2
Second example showing a lens effect component
Lens Demo 3
lens-demo-3
Third example showing a lens effect component
light-rays-demo
Demo of the light-rays component showcasing animated light rays
Line Shadow Text Demo
line-shadow-text-demo
Example showing a text component with a moving line shadow.
Magic Card Demo
magic-card-demo
Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.
Marquee 3D
marquee-3d
Example showing a 3D infinite scrolling component.
Marquee Demo
marquee-demo
Example showing an infinite scrolling component.
Marquee Vertical Demo
marquee-demo-vertical
Example showing a vertical infinite scrolling component.
Marquee Logos
marquee-logos
Example showing an infinite scrolling logo carousel.
Meteors Demo
meteors-demo
Example showing a meteor shower effect.
Morphing Text Demo
morphing-text-demo
Example showing a dynamic text morphing component.
Neon Gradient Card Demo
neon-gradient-card-demo
Example showing a beautiful neon card effect.
Number Ticker Decimal Demo
number-ticker-decimal-demo
Example showing animated counting decimal numbers.
Number Ticker Demo
number-ticker-demo
Example showing animated counting numbers.
Number Ticker Demo 2
number-ticker-demo-2
Example showing animated counting numbers.
Orbiting Circles Demo
orbiting-circles-demo
Example showing circles moving in orbital paths.
Particles Demo
particles-demo
Example showing interactive particle effects.
Pixel Image Demo
pixel-image-demo
Example showing a pixelated image effect.
Pointer Demo 1
pointer-demo-1
Example showing a pointer effect component
Progressive Blur Demo
progressive-blur-demo
Example showing progressive blur effect for scrollable content.
Pulsating Button Demo
pulsating-button-demo
Example showing an animated pulsating button.
Rainbow Button Demo
rainbow-button-demo
Example showing an animated button with rainbow effect.
Rainbow Button Demo 2
rainbow-button-demo-2
Example showing an animated button with rainbow effect.
Retro Grid Demo
retro-grid-demo
Example showing an animated scrolling retro grid effect.
Ripple Button Demo
ripple-button-demo
Example showing an animated button with ripple effect.
Ripple Demo
ripple-demo
Example showing an animated ripple effect.
Safari Demo
safari-demo
Example showing a Safari browser mockup.
Safari Demo 2
safari-demo-2
Second example showing a Safari browser mockup.
Safari Demo 3
safari-demo-3
Third example showing a Safari browser mockup.
Safari Demo 4
safari-demo-4
Fourth example showing a Safari browser mockup.
Scroll Based Velocity Demo
scroll-based-velocity-demo
Example showing text speed changes based on scroll velocity.
Scroll Based Velocity Images
scroll-based-velocity-images-demo
Example showing Unsplash images scrolling with speed reacting to scroll velocity.
Scroll Progress Demo
scroll-progress-demo
Example showing animated scroll progress for your pages.
Shimmer Button Demo
shimmer-button-demo
Example showing a button with a shimmering light effect.
Shine Border Demo
shine-border-demo
Example showing an animated shining border effect.
Shine Border Demo 2
shine-border-demo-2
Second example showing an animated shining border effect.
Shiny Button Demo
shiny-button-demo
Example showing a shiny button with dynamic styles.
smooth-cursor-demo
Basic smooth cursor example
Sparkles Text Demo
sparkles-text-demo
Example showing text with animated sparkle effects.
Spinning Text Demo
spinning-text-demo
Example showing spinning text animation.
Spinning Text Demo 2
spinning-text-demo-2
Example showing spinning text animation.
Striped Pattern (Dashed)
striped-pattern-dashed
Example showing a background striped pattern with a dashed stroke.
Striped Pattern Demo
striped-pattern-demo
Example showing a background striped pattern made with SVGs.
Striped Pattern (Right)
striped-pattern-right
Example showing a background striped pattern slanting to the right using SVG.
Terminal Demo
terminal-demo
Example showing a terminal with animated text.
Terminal Demo
terminal-demo-2
Example showing a terminal with animated text and custom delays
Text Animate Demo
text-animate-demo
Example showing various text animations.
Text Animate Demo 2
text-animate-demo-2
Second example showing various text animations.
Text Animate Demo 3
text-animate-demo-3
Third example showing various text animations.
Text Animate Demo 4
text-animate-demo-4
Fourth example showing various text animations.
Text Animate Demo 5
text-animate-demo-5
Fifth example showing various text animations.
Text Animate Demo 6
text-animate-demo-6
Sixth example showing various text animations.
Text Animate Demo 7
text-animate-demo-7
Seventh example showing various text animations.
Text Animate Demo 8
text-animate-demo-8
Eighth example showing various text animations.
Text Animate Demo 9
text-animate-demo-9
Ninth example showing various text animations.
Text Reveal Demo
text-reveal-demo
Example showing text that fades in on scroll.
Tweet Card Demo
tweet-card-demo
Example showing a tweet card with author info.
Tweet Card Images
tweet-card-images
Example showing a tweet card with images.
Tweet Card Meta Preview
tweet-card-meta-preview
Example showing a tweet card with meta preview.
Typing Animation Demo
typing-animation-demo
Example showing typed character animations.
Typing Animation Multiple Words
typing-animation-demo-2
Example showing multiple words with looping.
Typing Animation Custom Speed
typing-animation-demo-3
Example showing custom typing and deleting speeds.
Typing Animation Start on View
typing-animation-demo-4
Example showing animation that starts when in viewport.
Typing Animation Without Cursor
typing-animation-demo-5
Example showing typing animation without cursor.
Typing Animation Single Play
typing-animation-demo-6
Example showing single play without looping.
Typing Animation Cursor Blinking
typing-animation-demo-7
Example showing cursor blinking control.
Typing Animation Cursor Styles
typing-animation-demo-8
Example showing different cursor styles (line, block, underscore).
Video Text Demo
video-text-demo
Example showing text with a video background.
Warp Background Demo
warp-background-demo
Example showing a card with a time warping background effect.
Word Rotate Demo
word-rotate-demo
Example showing vertical word rotation animation.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Android Demo
android-demo
Example showing a mockup of an Android device.
Android Demo 2
android-demo-2
Second example showing a mockup of an Android device.
Android Demo 3
android-demo-3
Third example showing a mockup of an Android device.
Animated Beam Bidirectional
animated-beam-bidirectional
Example showing a bidirectional animated beam effect.
Animated Beam Demo
animated-beam-demo
Example showing an animated beam of light effect.
Animated Beam Multiple Inputs
animated-beam-multiple-inputs
Example showing animated beams with multiple input points.
Animated Beam Multiple Outputs
animated-beam-multiple-outputs
Example showing animated beams with multiple output points.
Animated Beam Unidirectional
animated-beam-unidirectional
Example showing a unidirectional animated beam effect.
Animated Circular Progress Bar Demo
animated-circular-progress-bar-demo
Example showing an animated circular progress gauge.
Animated Gradient Text Demo
animated-gradient-text-demo
Example showing text with animated gradient backgrounds.
Animated Gradient Text Demo 2
animated-gradient-text-demo-2
Second example showing text with animated gradient backgrounds.
Animated Grid Pattern Demo
animated-grid-pattern-demo
Example showing an animated grid pattern background.
Animated List Demo
animated-list-demo
Example showing a list with sequenced item animations.
Animated Shiny Text Demo
animated-shiny-text-demo
Example showing text with a shimmering light effect.
Animated Theme Toggler Demo
animated-theme-toggler-demo
Example showing animation while changing the theme.
Aurora Text Demo
aurora-text-demo
Example showing a beautiful aurora text effect.
Avatar Circles Demo
avatar-circles-demo
Example showing overlapping avatar circles.
Bento Demo
bento-demo
Example showing a bento grid layout for showcasing features.
Bento Vertical Demo
bento-demo-vertical
Example showing a vertical bento grid layout.
Blur Fade Demo
blur-fade-demo
Example showing blur fade in and out animations.
Blur Fade Text Demo
blur-fade-text-demo
Example showing blur fade animations with text.
Border Beam Demo
border-beam-demo
Example showing an animated border beam effect.
Border Beam Demo
border-beam-demo-2
Example showing an animated border beam effect.
Border Beam Demo 3
border-beam-demo-3
Example showing an animated border beam effect.
Border Beam Demo 4
border-beam-demo-4
Example showing an animated border beam effect.
Code Comparison Demo
code-comparison-demo
Example showing a component which compares two code snippets.
Comic Text Demo
comic-text-demo
Example showing comic text animation.
Confetti Basic Cannon
confetti-basic-cannon
Example showing basic confetti cannon animation.
Confetti Custom Shapes
confetti-custom-shapes
Example showing confetti with custom shape particles.
Confetti Demo
confetti-demo
Example showing confetti animations for celebrations.
Confetti Emoji
confetti-emoji
Example showing confetti with emoji particles.
Confetti Fireworks
confetti-fireworks
Example showing fireworks-style confetti animation.
Confetti Random Direction
confetti-random-direction
Example showing confetti with random directions.
Confetti Side Cannons
confetti-side-cannons
Example showing side-mounted confetti cannons.
Confetti Stars
confetti-stars
Example showing star-shaped confetti animation.
Cool Mode Custom
cool-mode-custom
Example showing customized cool mode effects.
Cool Mode Demo
cool-mode-demo
Example showing cool mode effect for buttons and links.
Dock Demo
dock-demo
Example showing a MacOS-style dock implementation.
Dock Demo 2
dock-demo-2
Second example showing a MacOS-style dock implementation.
Dock Demo 3
dock-demo-3
Third example showing a MacOS-style dock implementation.
Dot Pattern Demo
dot-pattern-demo
Example showing a background dot pattern made with SVGs.
Dot Pattern Linear Gradient
dot-pattern-linear-gradient
Example showing a dot pattern with linear gradient effects.
Dot Pattern with glow effect
dot-pattern-with-glow-effect
Example showing a dot pattern with glow effect
Dotted Map Demo
dotted-map-demo
Example showing a dotted map.
Dotted Map Demo 2
dotted-map-demo-2
Example showing a dotted map.
File Tree Demo
file-tree-demo
Example showing a component that displays folder and file structure.
Flickering Grid Demo
flickering-grid-demo
Example showing a flickering grid background.
Flickering Grid Rounded Demo
flickering-grid-rounded-demo
Example showing a flickering grid background with rounded corners.
Globe Demo
globe-demo
Example showing an autorotating, interactive WebGL globe.
Grid Pattern Dashed
grid-pattern-dashed
Example showing a dashed grid pattern.
Grid Pattern Demo
grid-pattern-demo
Example showing a background grid pattern made with SVGs.
Grid Pattern Linear Gradient
grid-pattern-linear-gradient
Example showing a grid pattern with linear gradient effects.
Hero Video Dialog Demo
hero-video-dialog-demo
Example showing a hero video dialog component.
Hero Video Dialog Top In Bottom Out Demo
hero-video-dialog-demo-top-in-bottom-out
Example showing a hero video dialog with top-in bottom-out animation.
Highlighter Demo
highlighter-demo
Example showing the demo of a Highlighter
Hyper Text Demo
hyper-text-demo
Example showing text with scrambling letter animations.
Icon Cloud Demo
icon-cloud-demo
Example showing an interactive 3D icon cloud.
Icon Cloud Demo 2
icon-cloud-demo-2
Second example showing an interactive 3D icon cloud.
Icon Cloud Demo 3
icon-cloud-demo-3
Third example showing an interactive 3D icon cloud.
Interactive Grid Pattern Demo
interactive-grid-pattern-demo
Example showing an interactive grid pattern background.
Interactive Grid Pattern Demo 2
interactive-grid-pattern-demo-2
Second example showing an interactive grid pattern background.
Interactive Hover Button Demo
interactive-hover-button-demo
Example showing an interactive button with hover effects.
iPhone Demo
iphone-demo
Example showing an iPhone mockup.
iPhone Demo 2
iphone-demo-2
Second example showing an iPhone mockup.
iPhone Demo 3
iphone-demo-3
Third example showing an iPhone mockup.
Lens Demo
lens-demo
Example showing a lens effect component
Lens Demo 2
lens-demo-2
Second example showing a lens effect component
Lens Demo 3
lens-demo-3
Third example showing a lens effect component
light-rays-demo
Demo of the light-rays component showcasing animated light rays
Line Shadow Text Demo
line-shadow-text-demo
Example showing a text component with a moving line shadow.
Magic Card Demo
magic-card-demo
Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.
Marquee 3D
marquee-3d
Example showing a 3D infinite scrolling component.
Marquee Demo
marquee-demo
Example showing an infinite scrolling component.
Marquee Vertical Demo
marquee-demo-vertical
Example showing a vertical infinite scrolling component.
Marquee Logos
marquee-logos
Example showing an infinite scrolling logo carousel.
Meteors Demo
meteors-demo
Example showing a meteor shower effect.
Morphing Text Demo
morphing-text-demo
Example showing a dynamic text morphing component.
Neon Gradient Card Demo
neon-gradient-card-demo
Example showing a beautiful neon card effect.
Number Ticker Decimal Demo
number-ticker-decimal-demo
Example showing animated counting decimal numbers.
Number Ticker Demo
number-ticker-demo
Example showing animated counting numbers.
Number Ticker Demo 2
number-ticker-demo-2
Example showing animated counting numbers.
Orbiting Circles Demo
orbiting-circles-demo
Example showing circles moving in orbital paths.
Particles Demo
particles-demo
Example showing interactive particle effects.
Pixel Image Demo
pixel-image-demo
Example showing a pixelated image effect.
Pointer Demo 1
pointer-demo-1
Example showing a pointer effect component
Progressive Blur Demo
progressive-blur-demo
Example showing progressive blur effect for scrollable content.
Pulsating Button Demo
pulsating-button-demo
Example showing an animated pulsating button.
Rainbow Button Demo
rainbow-button-demo
Example showing an animated button with rainbow effect.
Rainbow Button Demo 2
rainbow-button-demo-2
Example showing an animated button with rainbow effect.
Retro Grid Demo
retro-grid-demo
Example showing an animated scrolling retro grid effect.
Ripple Button Demo
ripple-button-demo
Example showing an animated button with ripple effect.
Ripple Demo
ripple-demo
Example showing an animated ripple effect.
Safari Demo
safari-demo
Example showing a Safari browser mockup.
Safari Demo 2
safari-demo-2
Second example showing a Safari browser mockup.
Safari Demo 3
safari-demo-3
Third example showing a Safari browser mockup.
Safari Demo 4
safari-demo-4
Fourth example showing a Safari browser mockup.
Scroll Based Velocity Demo
scroll-based-velocity-demo
Example showing text speed changes based on scroll velocity.
Scroll Based Velocity Images
scroll-based-velocity-images-demo
Example showing Unsplash images scrolling with speed reacting to scroll velocity.
Scroll Progress Demo
scroll-progress-demo
Example showing animated scroll progress for your pages.
Shimmer Button Demo
shimmer-button-demo
Example showing a button with a shimmering light effect.
Shine Border Demo
shine-border-demo
Example showing an animated shining border effect.
Shine Border Demo 2
shine-border-demo-2
Second example showing an animated shining border effect.
Shiny Button Demo
shiny-button-demo
Example showing a shiny button with dynamic styles.
smooth-cursor-demo
Basic smooth cursor example
Sparkles Text Demo
sparkles-text-demo
Example showing text with animated sparkle effects.
Spinning Text Demo
spinning-text-demo
Example showing spinning text animation.
Spinning Text Demo 2
spinning-text-demo-2
Example showing spinning text animation.
Striped Pattern (Dashed)
striped-pattern-dashed
Example showing a background striped pattern with a dashed stroke.
Striped Pattern Demo
striped-pattern-demo
Example showing a background striped pattern made with SVGs.
Striped Pattern (Right)
striped-pattern-right
Example showing a background striped pattern slanting to the right using SVG.
Terminal Demo
terminal-demo
Example showing a terminal with animated text.
Terminal Demo
terminal-demo-2
Example showing a terminal with animated text and custom delays
Text Animate Demo
text-animate-demo
Example showing various text animations.
Text Animate Demo 2
text-animate-demo-2
Second example showing various text animations.
Text Animate Demo 3
text-animate-demo-3
Third example showing various text animations.
Text Animate Demo 4
text-animate-demo-4
Fourth example showing various text animations.
Text Animate Demo 5
text-animate-demo-5
Fifth example showing various text animations.
Text Animate Demo 6
text-animate-demo-6
Sixth example showing various text animations.
Text Animate Demo 7
text-animate-demo-7
Seventh example showing various text animations.
Text Animate Demo 8
text-animate-demo-8
Eighth example showing various text animations.
Text Animate Demo 9
text-animate-demo-9
Ninth example showing various text animations.
Text Reveal Demo
text-reveal-demo
Example showing text that fades in on scroll.
Tweet Card Demo
tweet-card-demo
Example showing a tweet card with author info.
Tweet Card Images
tweet-card-images
Example showing a tweet card with images.
Tweet Card Meta Preview
tweet-card-meta-preview
Example showing a tweet card with meta preview.
Typing Animation Demo
typing-animation-demo
Example showing typed character animations.
Typing Animation Multiple Words
typing-animation-demo-2
Example showing multiple words with looping.
Typing Animation Custom Speed
typing-animation-demo-3
Example showing custom typing and deleting speeds.
Typing Animation Start on View
typing-animation-demo-4
Example showing animation that starts when in viewport.
Typing Animation Without Cursor
typing-animation-demo-5
Example showing typing animation without cursor.
Typing Animation Single Play
typing-animation-demo-6
Example showing single play without looping.
Typing Animation Cursor Blinking
typing-animation-demo-7
Example showing cursor blinking control.
Typing Animation Cursor Styles
typing-animation-demo-8
Example showing different cursor styles (line, block, underscore).
Video Text Demo
video-text-demo
Example showing text with a video background.
Warp Background Demo
warp-background-demo
Example showing a card with a time warping background effect.
Word Rotate Demo
word-rotate-demo
Example showing vertical word rotation animation.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information