---
name: "@magicui"
slug: "magicui"
description: "Magic UI is a flagship open-source animated component library for design engineers, offering 150+ free React components and effects built with TypeScript, Tailwind CSS, and Motion. Categories span Backgrounds (Flickering Grid, Aurora, Interactive), Text effects (Aurora Text, Comic Text, Blur Fade), Buttons (Magnetic, Animated Shiny), Cards (Bento Grid, Card Glare), Borders (Magic Border, Beam Shine), Devices, Social Proof (Avatar Circles, Marquee), and standalone Templates. Companion to shadcn/ui (same install pattern). 100% free, MIT licensed, 20k+ GitHub stars. Use for: adding high-impact animated hero sections, bento grids, shimmer effects, and interactive backgrounds to SaaS landing pages or portfolios built on shadcn/ui."
category: "Animated components"
tags: ["3d", "aesthetic", "animation", "backgrounds", "blocks", "buttons", "cards", "design-system", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "overlays", "payments", "pro-available", "retro", "saas", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "magicuidesign"
website: "https://magicui.design"
github: "https://github.com/magicuidesign/magicui"
registry: "https://magicui.design/r/registry"
pro: true
pro_url: "https://pro.magicui.design"
github_stars: 21473
component_count: 247
generated_at: "2026-07-28T08:00:50.948Z"
---

# @magicui

Magic UI is a flagship open-source animated component library for design engineers, offering 150+ free React components and effects built with TypeScript, Tailwind CSS, and Motion. Categories span Backgrounds (Flickering Grid, Aurora, Interactive), Text effects (Aurora Text, Comic Text, Blur Fade), Buttons (Magnetic, Animated Shiny), Cards (Bento Grid, Card Glare), Borders (Magic Border, Beam Shine), Devices, Social Proof (Avatar Circles, Marquee), and standalone Templates. Companion to shadcn/ui (same install pattern). 100% free, MIT licensed, 20k+ GitHub stars. Use for: adding high-impact animated hero sections, bento grids, shimmer effects, and interactive backgrounds to SaaS landing pages or portfolios built on shadcn/ui.

## Links

- Website: https://magicui.design
- GitHub: https://github.com/magicuidesign/magicui
- Registry JSON: https://magicui.design/r/registry
- Directory page: https://sh4dcn.vercel.app/registry/magicui
- This file: https://sh4dcn.vercel.app/md/magicui.md
- Pro / pricing: https://pro.magicui.design

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://magicui.design/r/registry
pnpm dlx shadcn@latest add https://magicui.design/r/registry
bunx shadcn@latest add https://magicui.design/r/registry
# clone the source repo
git clone https://github.com/magicuidesign/magicui.git
# fetch the raw registry index
curl -s https://magicui.design/r/registry
```

## Components (247)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://magicui.design/r/index` |
| magic-card | registry:ui | A spotlight effect that follows your mouse cursor and highlights borders on hover. | `npx shadcn@latest add https://magicui.design/r/magic-card` |
| android | registry:ui | A mockup of an Android device. | `npx shadcn@latest add https://magicui.design/r/android` |
| warp-background | registry:ui | A card with a time warping background effect. | `npx shadcn@latest add https://magicui.design/r/warp-background` |
| line-shadow-text | registry:ui | A text component with a moving line shadow. | `npx shadcn@latest add https://magicui.design/r/line-shadow-text` |
| aurora-text | registry:ui | A beautiful aurora text effect | `npx shadcn@latest add https://magicui.design/r/aurora-text` |
| morphing-text | registry:ui | A dynamic text morphing component for Magic UI. | `npx shadcn@latest add https://magicui.design/r/morphing-text` |
| scroll-progress | registry:ui | Animated Scroll Progress for your pages | `npx shadcn@latest add https://magicui.design/r/scroll-progress` |
| lens | registry:ui | A interactive component that enables zooming into images, videos and other elements. | `npx shadcn@latest add https://magicui.design/r/lens` |
| pointer | registry:ui | A component that displays a pointer when hovering over an element | `npx shadcn@latest add https://magicui.design/r/pointer` |
| smooth-cursor | registry:ui | A customizable, physics-based smooth cursor animation component with spring animations and rotation effects | `npx shadcn@latest add https://magicui.design/r/smooth-cursor` |
| progressive-blur | registry:ui | The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above. | `npx shadcn@latest add https://magicui.design/r/progressive-blur` |
| neon-gradient-card | registry:ui | A beautiful neon card effect | `npx shadcn@latest add https://magicui.design/r/neon-gradient-card` |
| noise-texture | registry:ui | An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays. | `npx shadcn@latest add https://magicui.design/r/noise-texture` |
| meteors | registry:ui | A meteor shower effect. | `npx shadcn@latest add https://magicui.design/r/meteors` |
| grid-pattern | registry:ui | A background grid pattern made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/grid-pattern` |
| hexagon-pattern | registry:ui | A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/hexagon-pattern` |
| striped-pattern | registry:ui | A background striped pattern made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/striped-pattern` |
| interactive-grid-pattern | registry:ui | A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/interactive-grid-pattern` |
| dot-pattern | registry:ui | A background dot pattern made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/dot-pattern` |
| flickering-grid | registry:ui | A flickering grid background made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/flickering-grid` |
| hero-video-dialog | registry:ui | A hero video dialog component. | `npx shadcn@latest add https://magicui.design/r/hero-video-dialog` |
| code-comparison | registry:ui | A component which compares two code snippets. | `npx shadcn@latest add https://magicui.design/r/code-comparison` |
| marquee | registry:ui | An infinite scrolling component that can be used to display text, images, or videos. | `npx shadcn@latest add https://magicui.design/r/marquee` |
| globe | registry:ui | An autorotating, interactive, and highly performant globe made using WebGL. | `npx shadcn@latest add https://magicui.design/r/globe` |
| glyph-matrix | registry:ui | An animated grid of subtly shifting glyphs with fade effect and theme support. | `npx shadcn@latest add https://magicui.design/r/glyph-matrix` |
| glare-hover | registry:ui | A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color). | `npx shadcn@latest add https://magicui.design/r/glare-hover` |
| shimmer-button | registry:ui | A button with a shimmering light which travels around the perimeter. | `npx shadcn@latest add https://magicui.design/r/shimmer-button` |
| tweet-card | registry:ui | A card that displays a tweet with the author's name, handle, and profile picture. | `npx shadcn@latest add https://magicui.design/r/tweet-card` |
| client-tweet-card | registry:ui | A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture. | `npx shadcn@latest add https://magicui.design/r/client-tweet-card` |
| bento-grid | registry:ui | Bento grid is a layout used to showcase the features of a product in a simple and elegant way. | `npx shadcn@latest add https://magicui.design/r/bento-grid` |
| particles | registry: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. | `npx shadcn@latest add https://magicui.design/r/particles` |
| number-ticker | registry:ui | Animate numbers to count up or down to a target number | `npx shadcn@latest add https://magicui.design/r/number-ticker` |
| ripple | registry:ui | An animated ripple effect typically used behind elements to emphasize them. | `npx shadcn@latest add https://magicui.design/r/ripple` |
| retro-grid | registry:ui | An animated scrolling retro grid effect | `npx shadcn@latest add https://magicui.design/r/retro-grid` |
| animated-list | registry:ui | A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page. | `npx shadcn@latest add https://magicui.design/r/animated-list` |
| animated-shiny-text | registry:ui | A light glare effect which pans across text making it appear as if it is shimmering. | `npx shadcn@latest add https://magicui.design/r/animated-shiny-text` |
| animated-grid-pattern | registry:ui | A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS. | `npx shadcn@latest add https://magicui.design/r/animated-grid-pattern` |
| border-beam | registry:ui | An animated beam of light which travels along the border of its container. | `npx shadcn@latest add https://magicui.design/r/border-beam` |
| animated-beam | registry:ui | An animated beam of light which travels along a path. Useful for showcasing the integration features of a website. | `npx shadcn@latest add https://magicui.design/r/animated-beam` |
| text-reveal | registry:ui | Fade in text as you scroll down the page. | `npx shadcn@latest add https://magicui.design/r/text-reveal` |
| dia-text-reveal | registry:ui | A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color. | `npx shadcn@latest add https://magicui.design/r/dia-text-reveal` |
| hyper-text | registry:ui | A text animation that scrambles letters before revealing the final text. | `npx shadcn@latest add https://magicui.design/r/hyper-text` |
| animated-gradient-text | registry:ui | An animated gradient background which transitions between colors for text. | `npx shadcn@latest add https://magicui.design/r/animated-gradient-text` |
| orbiting-circles | registry:ui | A collection of circles which move in orbit along a circular path | `npx shadcn@latest add https://magicui.design/r/orbiting-circles` |
| dock | registry:ui | An implementation of the MacOS dock using react + tailwindcss + motion | `npx shadcn@latest add https://magicui.design/r/dock` |
| word-rotate | registry:ui | A vertical rotation of words | `npx shadcn@latest add https://magicui.design/r/word-rotate` |
| avatar-circles | registry:ui | Overlapping circles of avatars. | `npx shadcn@latest add https://magicui.design/r/avatar-circles` |
| typing-animation | registry:ui | Characters appearing in typed animation | `npx shadcn@latest add https://magicui.design/r/typing-animation` |
| sparkles-text | registry:ui | A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars. | `npx shadcn@latest add https://magicui.design/r/sparkles-text` |
| spinning-text | registry:ui | The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects. | `npx shadcn@latest add https://magicui.design/r/spinning-text` |
| comic-text | registry:ui | Comic text animation | `npx shadcn@latest add https://magicui.design/r/comic-text` |
| icon-cloud | registry:ui | An interactive 3D tag cloud component | `npx shadcn@latest add https://magicui.design/r/icon-cloud` |
| text-animate | registry:ui | A text animation component that animates text using a variety of different animations. | `npx shadcn@latest add https://magicui.design/r/text-animate` |
| scroll-based-velocity | registry:ui | Scrolling text whose speed changes based on scroll speed | `npx shadcn@latest add https://magicui.design/r/scroll-based-velocity` |
| shiny-button | registry:ui | A shiny button component with dynamic styles in the dark mode or light mode. | `npx shadcn@latest add https://magicui.design/r/shiny-button` |
| shine-border | registry:ui | Shine border is an animated background border effect. | `npx shadcn@latest add https://magicui.design/r/shine-border` |
| animated-circular-progress-bar | registry:ui | Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value. | `npx shadcn@latest add https://magicui.design/r/animated-circular-progress-bar` |
| confetti | registry:ui | Confetti animations are best used to delight your users when something special happens | `npx shadcn@latest add https://magicui.design/r/confetti` |
| cool-mode | registry:ui | Cool mode effect for buttons, links, and other DOMs | `npx shadcn@latest add https://magicui.design/r/cool-mode` |
| pulsating-button | registry:ui | An animated pulsating button useful for capturing attention of users. | `npx shadcn@latest add https://magicui.design/r/pulsating-button` |
| ripple-button | registry:ui | An animated button with ripple useful for user engagement. | `npx shadcn@latest add https://magicui.design/r/ripple-button` |
| file-tree | registry:ui | A component used to showcase the folder and file structure of a directory. | `npx shadcn@latest add https://magicui.design/r/file-tree` |
| blur-fade | registry:ui | Blur fade in and out animation. Used to smoothly fade in and out content. | `npx shadcn@latest add https://magicui.design/r/blur-fade` |
| safari | registry:ui | A safari browser mockup to showcase your website. | `npx shadcn@latest add https://magicui.design/r/safari` |
| iphone | registry:ui | A mockup of the iPhone | `npx shadcn@latest add https://magicui.design/r/iphone` |
| rainbow-button | registry:ui | An animated button with a rainbow effect. | `npx shadcn@latest add https://magicui.design/r/rainbow-button` |
| interactive-hover-button | registry:ui | — | `npx shadcn@latest add https://magicui.design/r/interactive-hover-button` |
| terminal | registry:ui | A terminal component | `npx shadcn@latest add https://magicui.design/r/terminal` |
| video-text | registry:ui | A component that displays text with a video playing in the background. | `npx shadcn@latest add https://magicui.design/r/video-text` |
| pixel-image | registry:ui | A component that displays an image with a pixelated effect, creating a retro aesthetic. | `npx shadcn@latest add https://magicui.design/r/pixel-image` |
| highlighter | registry:ui | A text highlighter that mimics the effect of a human-drawn marker stroke. | `npx shadcn@latest add https://magicui.design/r/highlighter` |
| animated-theme-toggler | registry:ui | Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler` |
| light-rays | registry:ui | A component with animated light rays which shine down from above. | `npx shadcn@latest add https://magicui.design/r/light-rays` |
| dotted-map | registry:ui | A component with a dotted map. | `npx shadcn@latest add https://magicui.design/r/dotted-map` |
| backlight | registry:ui | A backlight glow effect for videos, images, and SVGs. | `npx shadcn@latest add https://magicui.design/r/backlight` |
| kinetic-text | registry:ui | A text component that animates font weight of characters on hover. | `npx shadcn@latest add https://magicui.design/r/kinetic-text` |
| text-3d-flip | registry:ui | A text effect that flips each letter in 3D with a staggered animation on hover. | `npx shadcn@latest add https://magicui.design/r/text-3d-flip` |
| magic-card-demo | registry:example | Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover. | `npx shadcn@latest add https://magicui.design/r/magic-card-demo` |
| magic-card-demo-2 | registry:example | Example showing a magic card with an orb effect. | `npx shadcn@latest add https://magicui.design/r/magic-card-demo-2` |
| android-demo | registry:example | Example showing a mockup of an Android device. | `npx shadcn@latest add https://magicui.design/r/android-demo` |
| android-demo-2 | registry:example | Second example showing a mockup of an Android device. | `npx shadcn@latest add https://magicui.design/r/android-demo-2` |
| android-demo-3 | registry:example | Third example showing a mockup of an Android device. | `npx shadcn@latest add https://magicui.design/r/android-demo-3` |
| warp-background-demo | registry:example | Example showing a card with a time warping background effect. | `npx shadcn@latest add https://magicui.design/r/warp-background-demo` |
| line-shadow-text-demo | registry:example | Example showing a text component with a moving line shadow. | `npx shadcn@latest add https://magicui.design/r/line-shadow-text-demo` |
| aurora-text-demo | registry:example | Example showing a beautiful aurora text effect. | `npx shadcn@latest add https://magicui.design/r/aurora-text-demo` |
| morphing-text-demo | registry:example | Example showing a dynamic text morphing component. | `npx shadcn@latest add https://magicui.design/r/morphing-text-demo` |
| scroll-progress-demo | registry:example | Example showing animated scroll progress for your pages. | `npx shadcn@latest add https://magicui.design/r/scroll-progress-demo` |
| lens-demo | registry:example | Example showing a lens effect component | `npx shadcn@latest add https://magicui.design/r/lens-demo` |
| lens-demo-2 | registry:example | Second example showing a lens effect component | `npx shadcn@latest add https://magicui.design/r/lens-demo-2` |
| lens-demo-3 | registry:example | Third example showing a lens effect component | `npx shadcn@latest add https://magicui.design/r/lens-demo-3` |
| pointer-demo-1 | registry:example | Example showing a pointer effect component | `npx shadcn@latest add https://magicui.design/r/pointer-demo-1` |
| smooth-cursor-demo | registry:example | Basic smooth cursor example | `npx shadcn@latest add https://magicui.design/r/smooth-cursor-demo` |
| progressive-blur-demo | registry:example | Example showing progressive blur effect for scrollable content. | `npx shadcn@latest add https://magicui.design/r/progressive-blur-demo` |
| neon-gradient-card-demo | registry:example | Example showing a beautiful neon card effect. | `npx shadcn@latest add https://magicui.design/r/neon-gradient-card-demo` |
| noise-texture-demo | registry:example | Example showing the SVG noise texture in a framed panel with a radial mask. | `npx shadcn@latest add https://magicui.design/r/noise-texture-demo` |
| noise-texture-demo-2 | registry:example | Example showing a newsletter signup card with email input over a noise texture. | `npx shadcn@latest add https://magicui.design/r/noise-texture-demo-2` |
| noise-texture-demo-3 | registry:example | Example showing NoiseTexture behind a button label inside a relative button. | `npx shadcn@latest add https://magicui.design/r/noise-texture-demo-3` |
| noise-texture-demo-4 | registry:example | Example showing a labeled input field with NoiseTexture filling the input container. | `npx shadcn@latest add https://magicui.design/r/noise-texture-demo-4` |
| meteors-demo | registry:example | Example showing a meteor shower effect. | `npx shadcn@latest add https://magicui.design/r/meteors-demo` |
| grid-pattern-demo | registry:example | Example showing a background grid pattern made with SVGs. | `npx shadcn@latest add https://magicui.design/r/grid-pattern-demo` |
| striped-pattern-demo | registry:example | Example showing a background striped pattern made with SVGs. | `npx shadcn@latest add https://magicui.design/r/striped-pattern-demo` |
| striped-pattern-dashed | registry:example | Example showing a background striped pattern with a dashed stroke. | `npx shadcn@latest add https://magicui.design/r/striped-pattern-dashed` |
| striped-pattern-right | registry:example | Example showing a background striped pattern slanting to the right using SVG. | `npx shadcn@latest add https://magicui.design/r/striped-pattern-right` |
| grid-pattern-linear-gradient | registry:example | Example showing a grid pattern with linear gradient effects. | `npx shadcn@latest add https://magicui.design/r/grid-pattern-linear-gradient` |
| grid-pattern-dashed | registry:example | Example showing a dashed grid pattern. | `npx shadcn@latest add https://magicui.design/r/grid-pattern-dashed` |
| hexagon-pattern-demo | registry:example | Example showing a background hexagon pattern made with SVGs. | `npx shadcn@latest add https://magicui.design/r/hexagon-pattern-demo` |
| hexagon-pattern-linear-gradient | registry:example | Example showing a hexagon pattern with linear gradient effects. | `npx shadcn@latest add https://magicui.design/r/hexagon-pattern-linear-gradient` |
| hexagon-pattern-dashed | registry:example | Example showing a dashed hexagon pattern. | `npx shadcn@latest add https://magicui.design/r/hexagon-pattern-dashed` |
| hexagon-pattern-spacing | registry:example | Example showing a hexagon pattern with extra spacing between cells. | `npx shadcn@latest add https://magicui.design/r/hexagon-pattern-spacing` |
| dot-pattern-demo | registry:example | Example showing a background dot pattern made with SVGs. | `npx shadcn@latest add https://magicui.design/r/dot-pattern-demo` |
| dot-pattern-linear-gradient | registry:example | Example showing a dot pattern with linear gradient effects. | `npx shadcn@latest add https://magicui.design/r/dot-pattern-linear-gradient` |
| dot-pattern-with-glow-effect | registry:example | Example showing a dot pattern with glow effect | `npx shadcn@latest add https://magicui.design/r/dot-pattern-with-glow-effect` |
| flickering-grid-demo | registry:example | Example showing a flickering grid background. | `npx shadcn@latest add https://magicui.design/r/flickering-grid-demo` |
| flickering-grid-rounded-demo | registry:example | Example showing a flickering grid background with rounded corners. | `npx shadcn@latest add https://magicui.design/r/flickering-grid-rounded-demo` |
| hero-video-dialog-demo | registry:example | Example showing a hero video dialog component. | `npx shadcn@latest add https://magicui.design/r/hero-video-dialog-demo` |
| hero-video-dialog-demo-top-in-bottom-out | registry:example | Example showing a hero video dialog with top-in bottom-out animation. | `npx shadcn@latest add https://magicui.design/r/hero-video-dialog-demo-top-in-bottom-out` |
| code-comparison-demo | registry:example | Example showing a component which compares two code snippets. | `npx shadcn@latest add https://magicui.design/r/code-comparison-demo` |
| marquee-demo | registry:example | Example showing an infinite scrolling component. | `npx shadcn@latest add https://magicui.design/r/marquee-demo` |
| marquee-demo-vertical | registry:example | Example showing a vertical infinite scrolling component. | `npx shadcn@latest add https://magicui.design/r/marquee-demo-vertical` |
| marquee-logos | registry:example | Example showing an infinite scrolling logo carousel. | `npx shadcn@latest add https://magicui.design/r/marquee-logos` |
| marquee-3d | registry:example | Example showing a 3D infinite scrolling component. | `npx shadcn@latest add https://magicui.design/r/marquee-3d` |
| globe-demo | registry:example | Example showing an autorotating, interactive WebGL globe. | `npx shadcn@latest add https://magicui.design/r/globe-demo` |
| glyph-matrix-demo | registry:example | Example showing an animated grid of subtly shifting glyphs. | `npx shadcn@latest add https://magicui.design/r/glyph-matrix-demo` |
| glare-hover-demo | registry:example | Pricing card with diagonal hover glare (duration 600ms). | `npx shadcn@latest add https://magicui.design/r/glare-hover-demo` |
| glare-hover-demo-cta | registry:example | CTA card with hover glare (700ms). | `npx shadcn@latest add https://magicui.design/r/glare-hover-demo-cta` |
| glare-hover-demo-alert | registry:example | Three alerts with custom glare colors and opacity. | `npx shadcn@latest add https://magicui.design/r/glare-hover-demo-alert` |
| tweet-card-demo | registry:example | Example showing a tweet card with author info. | `npx shadcn@latest add https://magicui.design/r/tweet-card-demo` |
| tweet-card-images | registry:example | Example showing a tweet card with images. | `npx shadcn@latest add https://magicui.design/r/tweet-card-images` |
| tweet-card-meta-preview | registry:example | Example showing a tweet card with meta preview. | `npx shadcn@latest add https://magicui.design/r/tweet-card-meta-preview` |
| shimmer-button-demo | registry:example | Example showing a button with a shimmering light effect. | `npx shadcn@latest add https://magicui.design/r/shimmer-button-demo` |
| bento-demo | registry:example | Example showing a bento grid layout for showcasing features. | `npx shadcn@latest add https://magicui.design/r/bento-demo` |
| bento-demo-vertical | registry:example | Example showing a vertical bento grid layout. | `npx shadcn@latest add https://magicui.design/r/bento-demo-vertical` |
| number-ticker-demo | registry:example | Example showing animated counting numbers. | `npx shadcn@latest add https://magicui.design/r/number-ticker-demo` |
| number-ticker-demo-2 | registry:example | Example showing animated counting numbers. | `npx shadcn@latest add https://magicui.design/r/number-ticker-demo-2` |
| number-ticker-decimal-demo | registry:example | Example showing animated counting decimal numbers. | `npx shadcn@latest add https://magicui.design/r/number-ticker-decimal-demo` |
| ripple-demo | registry:example | Example showing an animated ripple effect. | `npx shadcn@latest add https://magicui.design/r/ripple-demo` |
| retro-grid-demo | registry:example | Example showing an animated scrolling retro grid effect. | `npx shadcn@latest add https://magicui.design/r/retro-grid-demo` |
| animated-list-demo | registry:example | Example showing a list with sequenced item animations. | `npx shadcn@latest add https://magicui.design/r/animated-list-demo` |
| animated-shiny-text-demo | registry:example | Example showing text with a shimmering light effect. | `npx shadcn@latest add https://magicui.design/r/animated-shiny-text-demo` |
| particles-demo | registry:example | Example showing interactive particle effects. | `npx shadcn@latest add https://magicui.design/r/particles-demo` |
| animated-grid-pattern-demo | registry:example | Example showing an animated grid pattern background. | `npx shadcn@latest add https://magicui.design/r/animated-grid-pattern-demo` |
| interactive-grid-pattern-demo | registry:example | Example showing an interactive grid pattern background. | `npx shadcn@latest add https://magicui.design/r/interactive-grid-pattern-demo` |
| interactive-grid-pattern-demo-2 | registry:example | Second example showing an interactive grid pattern background. | `npx shadcn@latest add https://magicui.design/r/interactive-grid-pattern-demo-2` |
| border-beam-demo | registry:example | Example showing an animated border beam effect. | `npx shadcn@latest add https://magicui.design/r/border-beam-demo` |
| border-beam-demo-2 | registry:example | Example showing an animated border beam effect. | `npx shadcn@latest add https://magicui.design/r/border-beam-demo-2` |
| border-beam-demo-3 | registry:example | Example showing an animated border beam effect. | `npx shadcn@latest add https://magicui.design/r/border-beam-demo-3` |
| border-beam-demo-4 | registry:example | Example showing an animated border beam effect. | `npx shadcn@latest add https://magicui.design/r/border-beam-demo-4` |
| animated-beam-demo | registry:example | Example showing an animated beam of light effect. | `npx shadcn@latest add https://magicui.design/r/animated-beam-demo` |
| animated-beam-unidirectional | registry:example | Example showing a unidirectional animated beam effect. | `npx shadcn@latest add https://magicui.design/r/animated-beam-unidirectional` |
| animated-beam-bidirectional | registry:example | Example showing a bidirectional animated beam effect. | `npx shadcn@latest add https://magicui.design/r/animated-beam-bidirectional` |
| animated-beam-multiple-inputs | registry:example | Example showing animated beams with multiple input points. | `npx shadcn@latest add https://magicui.design/r/animated-beam-multiple-inputs` |
| animated-beam-multiple-outputs | registry:example | Example showing animated beams with multiple output points. | `npx shadcn@latest add https://magicui.design/r/animated-beam-multiple-outputs` |
| text-reveal-demo | registry:example | Example showing text that fades in on scroll. | `npx shadcn@latest add https://magicui.design/r/text-reveal-demo` |
| dia-text-reveal-demo | registry:example | Example showing a sweeping color band reveal on headline text. | `npx shadcn@latest add https://magicui.design/r/dia-text-reveal-demo` |
| dia-text-reveal-demo-2 | registry:example | Custom gradient colors and settled text color on a light background. | `npx shadcn@latest add https://magicui.design/r/dia-text-reveal-demo-2` |
| dia-text-reveal-demo-3 | registry:example | Rotating phrases with repeat and repeat delay. | `npx shadcn@latest add https://magicui.design/r/dia-text-reveal-demo-3` |
| dia-text-reveal-demo-4 | registry:example | Slower sweep with delay — custom duration and timing. | `npx shadcn@latest add https://magicui.design/r/dia-text-reveal-demo-4` |
| animated-gradient-text-demo | registry:example | Example showing text with animated gradient backgrounds. | `npx shadcn@latest add https://magicui.design/r/animated-gradient-text-demo` |
| animated-gradient-text-demo-2 | registry:example | Second example showing text with animated gradient backgrounds. | `npx shadcn@latest add https://magicui.design/r/animated-gradient-text-demo-2` |
| orbiting-circles-demo | registry:example | Example showing circles moving in orbital paths. | `npx shadcn@latest add https://magicui.design/r/orbiting-circles-demo` |
| dock-demo | registry:example | Example showing a MacOS-style dock implementation. | `npx shadcn@latest add https://magicui.design/r/dock-demo` |
| dock-demo-2 | registry:example | Second example showing a MacOS-style dock implementation. | `npx shadcn@latest add https://magicui.design/r/dock-demo-2` |
| dock-demo-3 | registry:example | Third example showing a MacOS-style dock implementation. | `npx shadcn@latest add https://magicui.design/r/dock-demo-3` |
| word-rotate-demo | registry:example | Example showing vertical word rotation animation. | `npx shadcn@latest add https://magicui.design/r/word-rotate-demo` |
| hyper-text-demo | registry:example | Example showing text with scrambling letter animations. | `npx shadcn@latest add https://magicui.design/r/hyper-text-demo` |
| avatar-circles-demo | registry:example | Example showing overlapping avatar circles. | `npx shadcn@latest add https://magicui.design/r/avatar-circles-demo` |
| typing-animation-demo | registry:example | Example showing typed character animations. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo` |
| typing-animation-demo-2 | registry:example | Example showing multiple words with looping. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-2` |
| typing-animation-demo-3 | registry:example | Example showing custom typing and deleting speeds. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-3` |
| typing-animation-demo-4 | registry:example | Example showing animation that starts when in viewport. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-4` |
| typing-animation-demo-5 | registry:example | Example showing typing animation without cursor. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-5` |
| typing-animation-demo-6 | registry:example | Example showing single play without looping. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-6` |
| typing-animation-demo-7 | registry:example | Example showing cursor blinking control. | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-7` |
| typing-animation-demo-8 | registry:example | Example showing different cursor styles (line, block, underscore). | `npx shadcn@latest add https://magicui.design/r/typing-animation-demo-8` |
| scroll-based-velocity-demo | registry:example | Example showing text speed changes based on scroll velocity. | `npx shadcn@latest add https://magicui.design/r/scroll-based-velocity-demo` |
| scroll-based-velocity-images-demo | registry:example | Example showing Unsplash images scrolling with speed reacting to scroll velocity. | `npx shadcn@latest add https://magicui.design/r/scroll-based-velocity-images-demo` |
| sparkles-text-demo | registry:example | Example showing text with animated sparkle effects. | `npx shadcn@latest add https://magicui.design/r/sparkles-text-demo` |
| spinning-text-demo | registry:example | Example showing spinning text animation. | `npx shadcn@latest add https://magicui.design/r/spinning-text-demo` |
| spinning-text-demo-2 | registry:example | Example showing spinning text animation. | `npx shadcn@latest add https://magicui.design/r/spinning-text-demo-2` |
| comic-text-demo | registry:example | Example showing comic text animation. | `npx shadcn@latest add https://magicui.design/r/comic-text-demo` |
| icon-cloud-demo | registry:example | Example showing an interactive 3D icon cloud. | `npx shadcn@latest add https://magicui.design/r/icon-cloud-demo` |
| icon-cloud-demo-2 | registry:example | Second example showing an interactive 3D icon cloud. | `npx shadcn@latest add https://magicui.design/r/icon-cloud-demo-2` |
| icon-cloud-demo-3 | registry:example | Third example showing an interactive 3D icon cloud. | `npx shadcn@latest add https://magicui.design/r/icon-cloud-demo-3` |
| text-animate-demo | registry:example | Example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo` |
| text-animate-demo-2 | registry:example | Second example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-2` |
| text-animate-demo-3 | registry:example | Third example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-3` |
| text-animate-demo-4 | registry:example | Fourth example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-4` |
| text-animate-demo-5 | registry:example | Fifth example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-5` |
| text-animate-demo-6 | registry:example | Sixth example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-6` |
| text-animate-demo-7 | registry:example | Seventh example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-7` |
| text-animate-demo-8 | registry:example | Eighth example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-8` |
| text-animate-demo-9 | registry:example | Ninth example showing various text animations. | `npx shadcn@latest add https://magicui.design/r/text-animate-demo-9` |
| shiny-button-demo | registry:example | Example showing a shiny button with dynamic styles. | `npx shadcn@latest add https://magicui.design/r/shiny-button-demo` |
| animated-circular-progress-bar-demo | registry:example | Example showing an animated circular progress gauge. | `npx shadcn@latest add https://magicui.design/r/animated-circular-progress-bar-demo` |
| shine-border-demo | registry:example | Example showing an animated shining border effect. | `npx shadcn@latest add https://magicui.design/r/shine-border-demo` |
| shine-border-demo-2 | registry:example | Second example showing an animated shining border effect. | `npx shadcn@latest add https://magicui.design/r/shine-border-demo-2` |
| confetti-demo | registry:example | Example showing confetti animations for celebrations. | `npx shadcn@latest add https://magicui.design/r/confetti-demo` |
| confetti-basic-cannon | registry:example | Example showing basic confetti cannon animation. | `npx shadcn@latest add https://magicui.design/r/confetti-basic-cannon` |
| confetti-random-direction | registry:example | Example showing confetti with random directions. | `npx shadcn@latest add https://magicui.design/r/confetti-random-direction` |
| confetti-fireworks | registry:example | Example showing fireworks-style confetti animation. | `npx shadcn@latest add https://magicui.design/r/confetti-fireworks` |
| confetti-stars | registry:example | Example showing star-shaped confetti animation. | `npx shadcn@latest add https://magicui.design/r/confetti-stars` |
| confetti-side-cannons | registry:example | Example showing side-mounted confetti cannons. | `npx shadcn@latest add https://magicui.design/r/confetti-side-cannons` |
| confetti-custom-shapes | registry:example | Example showing confetti with custom shape particles. | `npx shadcn@latest add https://magicui.design/r/confetti-custom-shapes` |
| confetti-emoji | registry:example | Example showing confetti with emoji particles. | `npx shadcn@latest add https://magicui.design/r/confetti-emoji` |
| cool-mode-demo | registry:example | Example showing cool mode effect for buttons and links. | `npx shadcn@latest add https://magicui.design/r/cool-mode-demo` |
| cool-mode-custom | registry:example | Example showing customized cool mode effects. | `npx shadcn@latest add https://magicui.design/r/cool-mode-custom` |
| pulsating-button-demo | registry:example | Example showing an animated pulsating button. | `npx shadcn@latest add https://magicui.design/r/pulsating-button-demo` |
| pulsating-button-demo-2 | registry:example | Example showing an animated pulsating button with a ripple varaint. | `npx shadcn@latest add https://magicui.design/r/pulsating-button-demo-2` |
| ripple-button-demo | registry:example | Example showing an animated button with ripple effect. | `npx shadcn@latest add https://magicui.design/r/ripple-button-demo` |
| file-tree-demo | registry:example | Example showing a component that displays folder and file structure. | `npx shadcn@latest add https://magicui.design/r/file-tree-demo` |
| blur-fade-demo | registry:example | Example showing blur fade in and out animations. | `npx shadcn@latest add https://magicui.design/r/blur-fade-demo` |
| blur-fade-text-demo | registry:example | Example showing blur fade animations with text. | `npx shadcn@latest add https://magicui.design/r/blur-fade-text-demo` |
| safari-demo | registry:example | Example showing a Safari browser mockup. | `npx shadcn@latest add https://magicui.design/r/safari-demo` |
| safari-demo-2 | registry:example | Second example showing a Safari browser mockup. | `npx shadcn@latest add https://magicui.design/r/safari-demo-2` |
| safari-demo-3 | registry:example | Third example showing a Safari browser mockup. | `npx shadcn@latest add https://magicui.design/r/safari-demo-3` |
| safari-demo-4 | registry:example | Fourth example showing a Safari browser mockup. | `npx shadcn@latest add https://magicui.design/r/safari-demo-4` |
| iphone-demo | registry:example | Example showing an iPhone mockup. | `npx shadcn@latest add https://magicui.design/r/iphone-demo` |
| iphone-demo-2 | registry:example | Second example showing an iPhone mockup. | `npx shadcn@latest add https://magicui.design/r/iphone-demo-2` |
| iphone-demo-3 | registry:example | Third example showing an iPhone mockup. | `npx shadcn@latest add https://magicui.design/r/iphone-demo-3` |
| rainbow-button-demo | registry:example | Example showing an animated button with rainbow effect. | `npx shadcn@latest add https://magicui.design/r/rainbow-button-demo` |
| rainbow-button-demo-2 | registry:example | Example showing an animated button with rainbow effect. | `npx shadcn@latest add https://magicui.design/r/rainbow-button-demo-2` |
| interactive-hover-button-demo | registry:example | Example showing an interactive button with hover effects. | `npx shadcn@latest add https://magicui.design/r/interactive-hover-button-demo` |
| terminal-demo | registry:example | Example showing a terminal with animated text. | `npx shadcn@latest add https://magicui.design/r/terminal-demo` |
| terminal-demo-2 | registry:example | Example showing a terminal with animated text and custom delays | `npx shadcn@latest add https://magicui.design/r/terminal-demo-2` |
| video-text-demo | registry:example | Example showing text with a video background. | `npx shadcn@latest add https://magicui.design/r/video-text-demo` |
| pixel-image-demo | registry:example | Example showing a pixelated image effect. | `npx shadcn@latest add https://magicui.design/r/pixel-image-demo` |
| highlighter-demo | registry:example | Example showing the demo of a Highlighter | `npx shadcn@latest add https://magicui.design/r/highlighter-demo` |
| animated-theme-toggler-demo | registry:example | Example showing animation while changing the theme. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-demo` |
| animated-theme-toggler-square-demo | registry:example | Theme transition with a square clip reveal. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-square-demo` |
| animated-theme-toggler-diamond-demo | registry:example | Theme transition with a diamond-shaped clip reveal. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-diamond-demo` |
| animated-theme-toggler-rectangle-demo | registry:example | Theme transition with a rectangle clip reveal. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-rectangle-demo` |
| animated-theme-toggler-hexagon-demo | registry:example | Theme transition with a hexagon clip reveal. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-hexagon-demo` |
| animated-theme-toggler-triangle-demo | registry:example | Theme transition with a triangle clip reveal. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-triangle-demo` |
| animated-theme-toggler-star-demo | registry:example | Theme transition with a star-shaped clip reveal. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-star-demo` |
| animated-theme-toggler-next-themes-demo | registry:example | Controlled usage with next-themes so useTheme() subscribers stay in sync on toggle. | `npx shadcn@latest add https://magicui.design/r/animated-theme-toggler-next-themes-demo` |
| light-rays-demo | registry:example | Demo of the light-rays component showcasing animated light rays | `npx shadcn@latest add https://magicui.design/r/light-rays-demo` |
| dotted-map-demo | registry:example | Example showing a dotted map. | `npx shadcn@latest add https://magicui.design/r/dotted-map-demo` |
| dotted-map-demo-2 | registry:example | Example showing a dotted map. | `npx shadcn@latest add https://magicui.design/r/dotted-map-demo-2` |
| dotted-map-demo-3 | registry:example | Example showing a dotted map with pulse animation. | `npx shadcn@latest add https://magicui.design/r/dotted-map-demo-3` |
| backlight-video-demo | registry:example | An example of the backlight component with a video. | `npx shadcn@latest add https://magicui.design/r/backlight-video-demo` |
| backlight-image-demo | registry:example | An example of the backlight component with a image. | `npx shadcn@latest add https://magicui.design/r/backlight-image-demo` |
| backlight-svg-demo | registry:example | An example of the backlight component with SVGs. | `npx shadcn@latest add https://magicui.design/r/backlight-svg-demo` |
| kinetic-text-demo | registry:example | An example of the kinetic text component. | `npx shadcn@latest add https://magicui.design/r/kinetic-text-demo` |
| text-3d-flip-demo | registry:example | Example showing a 3D text animation that rotates each letter on hover. | `npx shadcn@latest add https://magicui.design/r/text-3d-flip-demo` |
| text-3d-flip-demo-2 | registry:example | Example showing a 3D text flip with stagger from center. | `npx shadcn@latest add https://magicui.design/r/text-3d-flip-demo-2` |
| utils | registry:lib | — | `npx shadcn@latest add https://magicui.design/r/utils` |

## For AI agents

```text
You are adding components from @magicui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/magicui.md) for the component list.
2. Fetch the machine-readable index: https://magicui.design/r/registry
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: magicui).
```