MagicUI SolidUI library for Design Engineers
75+ free and open-source animated components and effects built with SolidJS, Typescript, Tailwind CSS, and Motion.
Perfect companion for shadcn/ui.
Android
A mockup of an Android device.
Animated Beam
An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
Animated Circular Progress Bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Animated Gradient Text
An animated gradient background which transitions between colors for text.
Animated Grid Pattern
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Animated List
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Animated Shiny Text
A light glare effect which pans across text making it appear as if it is shimmering.
Theme Toggler
Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.
Aurora Text
A beautiful aurora text effect
Avatar Circles
Overlapping circles of avatars.
Backlight
A backlight glow effect for videos, images, and SVGs.
Bento Grid
A bento grid layout component that showcases content in a grid of cards with hover effects.
Blur Fade
Blur fade in and out animation. Used to smoothly fade in and out content.
Border Beam
An animated beam of light which travels along the border of its container.
Code Comparison
A component which compares two code snippets.
Comic Text
Comic text animation that looks like a comic book text
Confetti
Confetti animations are best used to delight your users when something special happens
Cool Mode
Cool mode effect for buttons, links, and other DOMs
Dia Text Reveal
A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.
Dock
An implementation of the macOS dock using SolidJS + TailwindCSS + motion.
Dot Pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Dotted Map
A component with a svg dotted map.
File Tree
A component used to showcase the folder and file structure of a directory.
Flickering Grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Glare Hover
A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.
Globe
An autorotating, interactive, and highly performant globe made using WebGL.
Glyph Matrix
An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
Grid Pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Hero Video Dialog
A hero video dialog component that opens a video player with configurable animations.
Hexagon Pattern
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Text Highlighter
A text highlighter that mimics the effect of a human-drawn marker stroke.
Hyper Text
A text animation that scrambles letters before revealing the final text.
Icon Cloud
An interactive 3D tag cloud component.
Interactive Grid Pattern
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
iPhone
A mockup of the iPhone
Kinetic Text
A text component that animates font weight of characters on hover.
Lens
A interactive component that enables zooming into images, videos and other elements.
Android
A mockup of an Android device.
Animated Beam
An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
Animated Circular Progress Bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Animated Gradient Text
An animated gradient background which transitions between colors for text.
Animated Grid Pattern
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Animated List
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Animated Shiny Text
A light glare effect which pans across text making it appear as if it is shimmering.
Theme Toggler
Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.
Aurora Text
A beautiful aurora text effect
Avatar Circles
Overlapping circles of avatars.
Backlight
A backlight glow effect for videos, images, and SVGs.
Bento Grid
A bento grid layout component that showcases content in a grid of cards with hover effects.
Blur Fade
Blur fade in and out animation. Used to smoothly fade in and out content.
Border Beam
An animated beam of light which travels along the border of its container.
Code Comparison
A component which compares two code snippets.
Comic Text
Comic text animation that looks like a comic book text
Confetti
Confetti animations are best used to delight your users when something special happens
Cool Mode
Cool mode effect for buttons, links, and other DOMs
Dia Text Reveal
A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.
Dock
An implementation of the macOS dock using SolidJS + TailwindCSS + motion.
Dot Pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Dotted Map
A component with a svg dotted map.
File Tree
A component used to showcase the folder and file structure of a directory.
Flickering Grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Glare Hover
A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.
Globe
An autorotating, interactive, and highly performant globe made using WebGL.
Glyph Matrix
An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
Grid Pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Hero Video Dialog
A hero video dialog component that opens a video player with configurable animations.
Hexagon Pattern
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Text Highlighter
A text highlighter that mimics the effect of a human-drawn marker stroke.
Hyper Text
A text animation that scrambles letters before revealing the final text.
Icon Cloud
An interactive 3D tag cloud component.
Interactive Grid Pattern
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
iPhone
A mockup of the iPhone
Kinetic Text
A text component that animates font weight of characters on hover.
Lens
A interactive component that enables zooming into images, videos and other elements.
Android
A mockup of an Android device.
Animated Beam
An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
Animated Circular Progress Bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Animated Gradient Text
An animated gradient background which transitions between colors for text.
Animated Grid Pattern
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Animated List
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Animated Shiny Text
A light glare effect which pans across text making it appear as if it is shimmering.
Theme Toggler
Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.
Aurora Text
A beautiful aurora text effect
Avatar Circles
Overlapping circles of avatars.
Backlight
A backlight glow effect for videos, images, and SVGs.
Bento Grid
A bento grid layout component that showcases content in a grid of cards with hover effects.
Blur Fade
Blur fade in and out animation. Used to smoothly fade in and out content.
Border Beam
An animated beam of light which travels along the border of its container.
Code Comparison
A component which compares two code snippets.
Comic Text
Comic text animation that looks like a comic book text
Confetti
Confetti animations are best used to delight your users when something special happens
Cool Mode
Cool mode effect for buttons, links, and other DOMs
Dia Text Reveal
A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.
Dock
An implementation of the macOS dock using SolidJS + TailwindCSS + motion.
Dot Pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Dotted Map
A component with a svg dotted map.
File Tree
A component used to showcase the folder and file structure of a directory.
Flickering Grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Glare Hover
A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.
Globe
An autorotating, interactive, and highly performant globe made using WebGL.
Glyph Matrix
An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
Grid Pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Hero Video Dialog
A hero video dialog component that opens a video player with configurable animations.
Hexagon Pattern
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Text Highlighter
A text highlighter that mimics the effect of a human-drawn marker stroke.
Hyper Text
A text animation that scrambles letters before revealing the final text.
Icon Cloud
An interactive 3D tag cloud component.
Interactive Grid Pattern
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
iPhone
A mockup of the iPhone
Kinetic Text
A text component that animates font weight of characters on hover.
Lens
A interactive component that enables zooming into images, videos and other elements.
Android
A mockup of an Android device.
Animated Beam
An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
Animated Circular Progress Bar
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Animated Gradient Text
An animated gradient background which transitions between colors for text.
Animated Grid Pattern
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Animated List
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Animated Shiny Text
A light glare effect which pans across text making it appear as if it is shimmering.
Theme Toggler
Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.
Aurora Text
A beautiful aurora text effect
Avatar Circles
Overlapping circles of avatars.
Backlight
A backlight glow effect for videos, images, and SVGs.
Bento Grid
A bento grid layout component that showcases content in a grid of cards with hover effects.
Blur Fade
Blur fade in and out animation. Used to smoothly fade in and out content.
Border Beam
An animated beam of light which travels along the border of its container.
Code Comparison
A component which compares two code snippets.
Comic Text
Comic text animation that looks like a comic book text
Confetti
Confetti animations are best used to delight your users when something special happens
Cool Mode
Cool mode effect for buttons, links, and other DOMs
Dia Text Reveal
A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.
Dock
An implementation of the macOS dock using SolidJS + TailwindCSS + motion.
Dot Pattern
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Dotted Map
A component with a svg dotted map.
File Tree
A component used to showcase the folder and file structure of a directory.
Flickering Grid
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Glare Hover
A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.
Globe
An autorotating, interactive, and highly performant globe made using WebGL.
Glyph Matrix
An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
Grid Pattern
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Hero Video Dialog
A hero video dialog component that opens a video player with configurable animations.
Hexagon Pattern
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Text Highlighter
A text highlighter that mimics the effect of a human-drawn marker stroke.
Hyper Text
A text animation that scrambles letters before revealing the final text.
Icon Cloud
An interactive 3D tag cloud component.
Interactive Grid Pattern
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
iPhone
A mockup of the iPhone
Kinetic Text
A text component that animates font weight of characters on hover.
Lens
A interactive component that enables zooming into images, videos and other elements.
Light Rays
A component with animated light rays which shine down from above.
Line Shadow Text
A text component with a moving line shadow.
Magic Card
A spotlight effect that follows your mouse cursor and highlights borders on hover.
Marquee
An infinite scrolling component that can be used to display text, images, or videos.
Meteors
A meteor shower effect.
Morphing Text
A dynamic text morphing component for Magic UI.
Neon Gradient Card
A beautiful neon card effect
Noise Texture
An SVG fractal noise layer using feTurbulence for subtle texture overlays.
Number Ticker
Animate numbers to count up or down to a target number.
Orbiting Circles
A collection of circles which move in orbit along a circular path.
Particles
Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
Pixel Image
A component that displays your image with a pixelated effect, enhancing the visual appeal of any image in your website.
Pointer
A component that displays a pointer when hovering over an element.
Progressive Blur
Add a progressive blur effect to scrollable content
Pulsating Button
An animated pulsating button useful for capturing attention of users.
Rainbow Button
An animated button with a rainbow effect
Retro Grid
An animated scrolling retro grid effect
Ripple
An animated ripple effect typically used behind elements to emphasize them.
Ripple Button
An animated button with ripple useful for user engagement
Safari
A safari browser mockup to showcase your website.
Scroll Based Velocity
Scrolling text whose speed changes based on scroll speed
Scroll Progress
Animated Scroll Progress for your pages
Shimmer Button
A button with a shimmering light which travels around the perimeter
Shine Border
Shine border is an animated background border effect.
Shiny Button
A shiny button component with dynamic styles in the dark mode or light mode.
Smooth Cursor
A customizable, physics-based smooth cursor animation component.
Sparkles Text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Striped Pattern
A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
Terminal
An implementation of the MacOS terminal. Useful for showcasing a command line interface.
Text 3D Flip
A text effect that flips each letter in 3D with a staggered animation on hover.
Text Animate
A text animation component that animates text using a variety of different animations.
Text Reveal
Fade in text as you scroll down the page.
Tweet Card
A card that displays a tweet with the author's name, handle, and profile picture.
Typing Animation
Characters appearing in typed animation.
Video Text
A text component with a video background.
Warp Background
A card with a time warping background effect.
Word Rotate
A vertical rotation of words
Light Rays
A component with animated light rays which shine down from above.
Line Shadow Text
A text component with a moving line shadow.
Magic Card
A spotlight effect that follows your mouse cursor and highlights borders on hover.
Marquee
An infinite scrolling component that can be used to display text, images, or videos.
Meteors
A meteor shower effect.
Morphing Text
A dynamic text morphing component for Magic UI.
Neon Gradient Card
A beautiful neon card effect
Noise Texture
An SVG fractal noise layer using feTurbulence for subtle texture overlays.
Number Ticker
Animate numbers to count up or down to a target number.
Orbiting Circles
A collection of circles which move in orbit along a circular path.
Particles
Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
Pixel Image
A component that displays your image with a pixelated effect, enhancing the visual appeal of any image in your website.
Pointer
A component that displays a pointer when hovering over an element.
Progressive Blur
Add a progressive blur effect to scrollable content
Pulsating Button
An animated pulsating button useful for capturing attention of users.
Rainbow Button
An animated button with a rainbow effect
Retro Grid
An animated scrolling retro grid effect
Ripple
An animated ripple effect typically used behind elements to emphasize them.
Ripple Button
An animated button with ripple useful for user engagement
Safari
A safari browser mockup to showcase your website.
Scroll Based Velocity
Scrolling text whose speed changes based on scroll speed
Scroll Progress
Animated Scroll Progress for your pages
Shimmer Button
A button with a shimmering light which travels around the perimeter
Shine Border
Shine border is an animated background border effect.
Shiny Button
A shiny button component with dynamic styles in the dark mode or light mode.
Smooth Cursor
A customizable, physics-based smooth cursor animation component.
Sparkles Text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Striped Pattern
A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
Terminal
An implementation of the MacOS terminal. Useful for showcasing a command line interface.
Text 3D Flip
A text effect that flips each letter in 3D with a staggered animation on hover.
Text Animate
A text animation component that animates text using a variety of different animations.
Text Reveal
Fade in text as you scroll down the page.
Tweet Card
A card that displays a tweet with the author's name, handle, and profile picture.
Typing Animation
Characters appearing in typed animation.
Video Text
A text component with a video background.
Warp Background
A card with a time warping background effect.
Word Rotate
A vertical rotation of words
Light Rays
A component with animated light rays which shine down from above.
Line Shadow Text
A text component with a moving line shadow.
Magic Card
A spotlight effect that follows your mouse cursor and highlights borders on hover.
Marquee
An infinite scrolling component that can be used to display text, images, or videos.
Meteors
A meteor shower effect.
Morphing Text
A dynamic text morphing component for Magic UI.
Neon Gradient Card
A beautiful neon card effect
Noise Texture
An SVG fractal noise layer using feTurbulence for subtle texture overlays.
Number Ticker
Animate numbers to count up or down to a target number.
Orbiting Circles
A collection of circles which move in orbit along a circular path.
Particles
Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
Pixel Image
A component that displays your image with a pixelated effect, enhancing the visual appeal of any image in your website.
Pointer
A component that displays a pointer when hovering over an element.
Progressive Blur
Add a progressive blur effect to scrollable content
Pulsating Button
An animated pulsating button useful for capturing attention of users.
Rainbow Button
An animated button with a rainbow effect
Retro Grid
An animated scrolling retro grid effect
Ripple
An animated ripple effect typically used behind elements to emphasize them.
Ripple Button
An animated button with ripple useful for user engagement
Safari
A safari browser mockup to showcase your website.
Scroll Based Velocity
Scrolling text whose speed changes based on scroll speed
Scroll Progress
Animated Scroll Progress for your pages
Shimmer Button
A button with a shimmering light which travels around the perimeter
Shine Border
Shine border is an animated background border effect.
Shiny Button
A shiny button component with dynamic styles in the dark mode or light mode.
Smooth Cursor
A customizable, physics-based smooth cursor animation component.
Sparkles Text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Striped Pattern
A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
Terminal
An implementation of the MacOS terminal. Useful for showcasing a command line interface.
Text 3D Flip
A text effect that flips each letter in 3D with a staggered animation on hover.
Text Animate
A text animation component that animates text using a variety of different animations.
Text Reveal
Fade in text as you scroll down the page.
Tweet Card
A card that displays a tweet with the author's name, handle, and profile picture.
Typing Animation
Characters appearing in typed animation.
Video Text
A text component with a video background.
Warp Background
A card with a time warping background effect.
Word Rotate
A vertical rotation of words
Light Rays
A component with animated light rays which shine down from above.
Line Shadow Text
A text component with a moving line shadow.
Magic Card
A spotlight effect that follows your mouse cursor and highlights borders on hover.
Marquee
An infinite scrolling component that can be used to display text, images, or videos.
Meteors
A meteor shower effect.
Morphing Text
A dynamic text morphing component for Magic UI.
Neon Gradient Card
A beautiful neon card effect
Noise Texture
An SVG fractal noise layer using feTurbulence for subtle texture overlays.
Number Ticker
Animate numbers to count up or down to a target number.
Orbiting Circles
A collection of circles which move in orbit along a circular path.
Particles
Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
Pixel Image
A component that displays your image with a pixelated effect, enhancing the visual appeal of any image in your website.
Pointer
A component that displays a pointer when hovering over an element.
Progressive Blur
Add a progressive blur effect to scrollable content
Pulsating Button
An animated pulsating button useful for capturing attention of users.
Rainbow Button
An animated button with a rainbow effect
Retro Grid
An animated scrolling retro grid effect
Ripple
An animated ripple effect typically used behind elements to emphasize them.
Ripple Button
An animated button with ripple useful for user engagement
Safari
A safari browser mockup to showcase your website.
Scroll Based Velocity
Scrolling text whose speed changes based on scroll speed
Scroll Progress
Animated Scroll Progress for your pages
Shimmer Button
A button with a shimmering light which travels around the perimeter
Shine Border
Shine border is an animated background border effect.
Shiny Button
A shiny button component with dynamic styles in the dark mode or light mode.
Smooth Cursor
A customizable, physics-based smooth cursor animation component.
Sparkles Text
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Spinning Text
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Striped Pattern
A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
Terminal
An implementation of the MacOS terminal. Useful for showcasing a command line interface.
Text 3D Flip
A text effect that flips each letter in 3D with a staggered animation on hover.
Text Animate
A text animation component that animates text using a variety of different animations.
Text Reveal
Fade in text as you scroll down the page.
Tweet Card
A card that displays a tweet with the author's name, handle, and profile picture.
Typing Animation
Characters appearing in typed animation.
Video Text
A text component with a video background.
Warp Background
A card with a time warping background effect.
Word Rotate
A vertical rotation of words