The explorer for the shadcn registry ecosystem.
[Magic UI] A beautiful aurora text effect
[Magic UI] Overlapping circles of avatars.
[Magic UI] A backlight glow effect for videos, images, and SVGs.
[Magic UI] Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
[Magic UI] Blur fade in and out animation. Used to smoothly fade in and out content.
[Magic UI] An animated beam of light which travels along the border of its container.
[Magic UI] A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
[Magic UI] A component which compares two code snippets.
[Magic UI] Comic text animation
[Magic UI] Confetti animations are best used to delight your users when something special happens
[Magic UI] Cool mode effect for buttons, links, and other DOMs
[Magic UI] A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color.
[Magic UI] An implementation of the MacOS dock using react + tailwindcss + motion
[Magic UI] A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
[Magic UI] A component with a dotted map.
[Magic UI] A component used to showcase the folder and file structure of a directory.
[Magic UI] A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
[Magic UI] A canvas-based pseudo-3D particle field with perspective projection, continuous rotation and buoyant drift.
[Magic UI] A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).
[Magic UI] An autorotating, interactive, and highly performant globe made using WebGL.
[Magic UI] An animated grid of subtly shifting glyphs with fade effect and theme support.
[Magic UI] A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
[Magic UI] A hero video dialog component.
[Magic UI] A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
[Magic UI] A text highlighter that mimics the effect of a human-drawn marker stroke.
[Magic UI] A text animation that scrambles letters before revealing the final text.
[Magic UI] An interactive 3D tag cloud component
[Magic UI]
[Magic UI] A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
[Magic UI]
[Magic UI] A mockup of the iPhone
[Magic UI] A text component that animates font weight of characters on hover.
[Magic UI] A interactive component that enables zooming into images, videos and other elements.
[Magic UI] A component with animated light rays which shine down from above.
[Magic UI] A text component with a moving line shadow.
[Magic UI] A spotlight effect that follows your mouse cursor and highlights borders on hover.
[Magic UI] An infinite scrolling component that can be used to display text, images, or videos.
[Magic UI] A meteor shower effect.
[Magic UI] A dynamic text morphing component for Magic UI.
[Magic UI] A beautiful neon card effect
[Magic UI] An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.
[Magic UI] Animate numbers to count up or down to a target number
[Magic UI] A collection of circles which move in orbit along a circular path
[Magic UI] 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.
[Magic UI] A component that displays an image with a pixelated effect, creating a retro aesthetic.
[Magic UI] A component that displays a pointer when hovering over an element
[Magic UI] The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.
[Magic UI] An animated pulsating button useful for capturing attention of users.