M
magicuidesign/magicui
AndroidandroidA mockup of an Android device.
Animated Beamanimated-beamAn animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
Animated Circular Progress Baranimated-circular-progress-barAnimated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Animated Gradient Textanimated-gradient-textAn animated gradient background which transitions between colors for text.
Animated Grid Patternanimated-grid-patternA animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Animated Listanimated-listA list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
Animated Shiny Textanimated-shiny-textA light glare effect which pans across text making it appear as if it is shimmering.
Theme Toggleranimated-theme-togglerA component for theme changing animation.
Aurora Textaurora-textA beautiful aurora text effect
Avatar Circlesavatar-circlesOverlapping circles of avatars.
Bento Gridbento-gridBento grid is a layout used to showcase the features of a product in a simple and elegant way.
Blur Fadeblur-fadeBlur fade in and out animation. Used to smoothly fade in and out content.
Border Beamborder-beamAn animated beam of light which travels along the border of its container.
Client Tweet Cardclient-tweet-cardA client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
Code Comparisoncode-comparisonA component which compares two code snippets.
Comic Textcomic-textComic text animation
ConfetticonfettiConfetti animations are best used to delight your users when something special happens
Cool Modecool-modeCool mode effect for buttons, links, and other DOMs
DockdockAn implementation of the MacOS dock using react + tailwindcss + motion
Dot Patterndot-patternA background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Dotted Mapdotted-mapA component with a dotted map.
File Treefile-treeA component used to showcase the folder and file structure of a directory.
Flickering Gridflickering-gridA flickering grid background made with SVGs, fully customizable using Tailwind CSS.
GlobeglobeAn autorotating, interactive, and highly performant globe made using WebGL.
Grid Patterngrid-patternA background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Hero Video Dialoghero-video-dialogA hero video dialog component.
HighlighterhighlighterA text highlighter that mimics the effect of a human-drawn marker stroke.
Hyper Texthyper-textA text animation that scrambles letters before revealing the final text.
Icon Cloudicon-cloudAn interactive 3D tag cloud component
Interactive Grid Patterninteractive-grid-patternA interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
interactive-hover-button
iPhoneiphoneA mockup of the iPhone
LenslensA interactive component that enables zooming into images, videos and other elements.
Light Rayslight-raysA component with animated light rays which shine down from above.
Line Shadow Textline-shadow-textA text component with a moving line shadow.
Magic Cardmagic-cardA spotlight effect that follows your mouse cursor and highlights borders on hover.
MarqueemarqueeAn infinite scrolling component that can be used to display text, images, or videos.
MeteorsmeteorsA meteor shower effect.
Morphing Textmorphing-textA dynamic text morphing component for Magic UI.
Neon Gradient Cardneon-gradient-cardA beautiful neon card effect
Number Tickernumber-tickerAnimate numbers to count up or down to a target number
Orbiting Circlesorbiting-circlesA collection of circles which move in orbit along a circular path
ParticlesparticlesParticles 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 Imagepixel-imageA component that displays an image with a pixelated effect, creating a retro aesthetic.
PointerpointerA component that displays a pointer when hovering over an element
Progressive Blurprogressive-blurThe Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.
Pulsating Buttonpulsating-buttonAn animated pulsating button useful for capturing attention of users.
Rainbow Buttonrainbow-buttonAn animated button with a rainbow effect.
Retro Gridretro-gridAn animated scrolling retro grid effect
RipplerippleAn animated ripple effect typically used behind elements to emphasize them.
Ripple Buttonripple-buttonAn animated button with ripple useful for user engagement.
SafarisafariA safari browser mockup to showcase your website.
Scroll Based Velocityscroll-based-velocityScrolling text whose speed changes based on scroll speed
Scroll Progressscroll-progressAnimated Scroll Progress for your pages
Shimmer Buttonshimmer-buttonA button with a shimmering light which travels around the perimeter.
Shine Bordershine-borderShine border is an animated background border effect.
Shiny Buttonshiny-buttonA shiny button component with dynamic styles in the dark mode or light mode.
smooth-cursorA customizable, physics-based smooth cursor animation component with spring animations and rotation effects
Sparkles Textsparkles-textA dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Spinning Textspinning-textThe Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Striped Patternstriped-patternA background striped pattern made with SVGs, fully customizable using Tailwind CSS.
TerminalterminalA terminal component
Text Animatetext-animateA text animation component that animates text using a variety of different animations.
Text Revealtext-revealFade in text as you scroll down the page.
Tweet Cardtweet-cardA card that displays a tweet with the author's name, handle, and profile picture.
Typing Animationtyping-animationCharacters appearing in typed animation
Video Textvideo-textA component that displays text with a video playing in the background.
Warp Backgroundwarp-backgroundA card with a time warping background effect.
Word Rotateword-rotateA vertical rotation of words