# magicui.design

> AI-optimized mirror of magicui.design containing 50 pages totalling 111,715 words of clean markdown content, structured data, and semantic HTML. Original source: https://magicui.design/. Last updated: 2026-05-01T18:54:11.959Z.

Each page is available as HTML (with JSON-LD structured data) and Markdown (text-only, ideal for LLMs and RAG).

## Homepage

- [site-root.html](/site-root.html) (1 words)

## Articles & Blog Posts

- [Installation](/docs/installation/index.html): How to install dependencies and structure your app. (2,289 words)
- [File Tree](/docs/components/file-tree/index.html): A component used to showcase the folder and file structure of a directory. (2,651 words)
- [Glare Hover](/docs/components/glare-hover/index.html): A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required. (3,014 words)
- [Lens](/docs/components/lens/index.html): A interactive component that enables zooming into images, videos and other elements. (2,673 words)
- [Code Comparison](/docs/components/code-comparison/index.html): A component which compares two code snippets. (2,669 words)
- [Animated Beam](/docs/components/animated-beam/index.html): An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website. (9,150 words)
- [Light Rays](/docs/components/light-rays/index.html): A component with animated light rays which shine down from above. (2,404 words)
- [Text Highlighter](/docs/components/highlighter/index.html): A text highlighter that mimics the effect of a human-drawn marker stroke. (2,414 words)
- [Hyper Text](/docs/components/hyper-text/index.html): A text animation that scrambles letters before revealing the final text. (2,317 words)
- [Animated Grid Pattern](/docs/components/animated-grid-pattern/index.html): A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS. (2,334 words)
- [Dotted Map](/docs/components/dotted-map/index.html): A component with a svg dotted map. (2,871 words)
- [Hero Video Dialog](/docs/components/hero-video-dialog/index.html): A hero video dialog component. (2,470 words)
- [Dot Pattern](/docs/components/dot-pattern/index.html): A background dot pattern made with SVGs, fully customizable using Tailwind CSS. (2,463 words)
- [Comic Text](/docs/components/comic-text/index.html): Comic text animation that looks like a comic book text (2,288 words)
- [Grid Pattern](/docs/components/grid-pattern/index.html): A background grid pattern made with SVGs, fully customizable using Tailwind CSS. (2,484 words)
- [iPhone](/docs/components/iphone/index.html): A mockup of the iPhone (2,438 words)
- [Avatar Circles](/docs/components/avatar-circles/index.html): Overlapping circles of avatars. (2,315 words)
- [Interactive Hover Button](/docs/components/interactive-hover-button/index.html): A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity. (2,292 words)
- [Bento Grid](/docs/components/bento-grid/index.html): Bento grid is a layout used to showcase the features of a product in a simple and elegant way. (3,894 words)
- [Interactive Grid Pattern](/docs/components/interactive-grid-pattern/index.html): A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS. (2,404 words)
- [Border Beam](/docs/components/border-beam/index.html): An animated beam of light which travels along the border of its container. (2,793 words)
- [Hexagon Pattern](/docs/components/hexagon-pattern/index.html): A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS. (2,572 words)
- [Theme Toggler](/docs/components/animated-theme-toggler/index.html): Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin. (2,655 words)
- [Blur Fade](/docs/components/blur-fade/index.html): Blur fade in and out animation. Used to smoothly fade in and out content. (2,476 words)
- [Flickering Grid](/docs/components/flickering-grid/index.html): A flickering grid background made with SVGs, fully customizable using Tailwind CSS. (2,374 words)
- [Dia Text Reveal](/docs/components/dia-text-reveal/index.html): A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color. (2,692 words)
- [Cool Mode](/docs/components/cool-mode/index.html): Cool mode effect for buttons, links, and other DOMs (2,360 words)
- [Animated Gradient Text](/docs/components/animated-gradient-text/index.html): An animated gradient background which transitions between colors for text. (2,430 words)
- [Animated Circular Progress Bar](/docs/components/animated-circular-progress-bar/index.html): Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value. (2,362 words)
- [Icon Cloud](/docs/components/icon-cloud/index.html): An interactive 3D tag cloud component (3,394 words)
- [Animated Shiny Text](/docs/components/animated-shiny-text/index.html): A light glare effect which pans across text making it appear as if it is shimmering. (2,345 words)
- [Application error: a client-side exception has occurred while loading magicui.design (see the browser console for more information).](/docs/components/globe/index.html) (17 words)
- [docs/legacy/index.html](/docs/legacy/index.html) (1 words)
- [docs/story/index.html](/docs/story/index.html) (1 words)
- [Introduction](/docs/index.html): Create magical landing pages with components that you can copy and paste into your apps. (2,427 words)
- [Magic UI MCP Server](/docs/mcp/index.html): Learn how to use the Model Context Protocol with Magic UI. (2,301 words)
- [blog/shadcn-ui/index.html](/blog/shadcn-ui/index.html) (1 words)
- [r/cool-mode-json.html](/r/cool-mode-json.html) (1 words)
- [Components](/docs/components/index.html): Here you can find all the components available in the library. (2,206 words)
- [Confetti](/docs/components/confetti/index.html): Confetti animations are best used to delight your users when something special happens (3,242 words)
- [r/confetti-json.html](/r/confetti-json.html) (367 words)
- [r/border-beam-json.html](/r/border-beam-json.html) (219 words)
- [Aurora Text](/docs/components/aurora-text/index.html): A beautiful aurora text effect (2,291 words)
- [r/confetti-emoji-json.html](/r/confetti-emoji-json.html) (124 words)
- [Text Reveal](/docs/components/text-reveal/index.html): Fade in text as you scroll down the page. (2,266 words)
- [Backlight](/docs/components/backlight/index.html): A backlight glow effect for videos, images, and SVGs. (3,024 words)
- [Dock](/docs/components/dock/index.html): An implementation of the MacOS dock using react + tailwindcss + framer motion (4,377 words)
- [Animated List](/docs/components/animated-list/index.html): A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page. (2,535 words)
- [elhussary](/showcase/elhussary/index.html): Elhussary's Portfolio Website. (27 words)

## Resources

- [Full Page Index](/index.html): Browse all cached pages with rich metadata
- [About This Cache](/content/about.html): Methodology, technical details, and usage guidelines
- [XML Sitemap](/content/sitemap.xml): Machine-readable sitemap for crawler discovery
- [Robots.txt](/content/robots.txt): Crawler directives