# Magic UI

## Docs

- [Android](https://mintlify.wiki/Max-Samson/magicui/components/android.md): A mockup of an Android device for showcasing mobile apps and designs
- [Animated Beam](https://mintlify.wiki/Max-Samson/magicui/components/animated-beam.md): An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
- [Animated Circular Progress Bar](https://mintlify.wiki/Max-Samson/magicui/components/animated-circular-progress-bar.md): Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
- [Animated Gradient Text](https://mintlify.wiki/Max-Samson/magicui/components/animated-gradient-text.md): An animated gradient background which transitions between colors for text.
- [Animated Grid Pattern](https://mintlify.wiki/Max-Samson/magicui/components/animated-grid-pattern.md): A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
- [Animated List](https://mintlify.wiki/Max-Samson/magicui/components/animated-list.md): A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
- [Animated Shiny Text](https://mintlify.wiki/Max-Samson/magicui/components/animated-shiny-text.md): A light glare effect which pans across text making it appear as if it is shimmering.
- [Animated Subscribe Button](https://mintlify.wiki/Max-Samson/magicui/components/animated-subscribe-button.md): An animated button that transitions between subscribed and unsubscribed states.
- [Animated Theme Toggler](https://mintlify.wiki/Max-Samson/magicui/components/animated-theme-toggler.md): An animated theme toggler component with smooth transitions using View Transitions API
- [Aurora Text](https://mintlify.wiki/Max-Samson/magicui/components/aurora-text.md): A beautiful aurora text effect
- [Avatar Circles](https://mintlify.wiki/Max-Samson/magicui/components/avatar-circles.md): Display overlapping circles of user avatars with a count indicator
- [Bento Grid](https://mintlify.wiki/Max-Samson/magicui/components/bento-grid.md): Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
- [Blur Fade](https://mintlify.wiki/Max-Samson/magicui/components/blur-fade.md): Blur fade in and out animation. Used to smoothly fade in and out content.
- [Border Beam](https://mintlify.wiki/Max-Samson/magicui/components/border-beam.md): An animated beam of light which travels along the border of its container.
- [Code Comparison](https://mintlify.wiki/Max-Samson/magicui/components/code-comparison.md): A side-by-side code comparison component with syntax highlighting
- [Comic Text](https://mintlify.wiki/Max-Samson/magicui/components/comic-text.md): Comic text animation that looks like a comic book text
- [Confetti](https://mintlify.wiki/Max-Samson/magicui/components/confetti.md): Confetti animations are best used to delight your users when something special happens
- [Cool Mode](https://mintlify.wiki/Max-Samson/magicui/components/cool-mode.md): Cool mode effect for buttons, links, and other DOMs
- [Dock](https://mintlify.wiki/Max-Samson/magicui/components/dock.md): A macOS-style dock component with magnification effects on hover
- [Dot Pattern](https://mintlify.wiki/Max-Samson/magicui/components/dot-pattern.md): A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
- [Dotted Map](https://mintlify.wiki/Max-Samson/magicui/components/dotted-map.md): An SVG-based dotted world map with customizable markers
- [File Tree](https://mintlify.wiki/Max-Samson/magicui/components/file-tree.md): Display folder and file structures with collapsible navigation
- [Flickering Grid](https://mintlify.wiki/Max-Samson/magicui/components/flickering-grid.md): A flickering grid background made with canvas, fully customizable using Tailwind CSS.
- [Globe](https://mintlify.wiki/Max-Samson/magicui/components/globe.md): An interactive, auto-rotating 3D globe powered by WebGL
- [Grid Pattern](https://mintlify.wiki/Max-Samson/magicui/components/grid-pattern.md): A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
- [Hero Video Dialog](https://mintlify.wiki/Max-Samson/magicui/components/hero-video-dialog.md): A beautiful video dialog component with multiple animation styles
- [Highlighter](https://mintlify.wiki/Max-Samson/magicui/components/highlighter.md): A text annotation component that mimics hand-drawn marker strokes
- [Hyper Text](https://mintlify.wiki/Max-Samson/magicui/components/hyper-text.md): A text animation that scrambles letters before revealing the final text.
- [Icon Cloud](https://mintlify.wiki/Max-Samson/magicui/components/icon-cloud.md): An interactive 3D rotating cloud of icons or images
- [Interactive Grid Pattern](https://mintlify.wiki/Max-Samson/magicui/components/interactive-grid-pattern.md): An interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
- [Interactive Hover Button](https://mintlify.wiki/Max-Samson/magicui/components/interactive-hover-button.md): A button with an interactive hover effect that reveals an arrow and animates the text.
- [iPhone](https://mintlify.wiki/Max-Samson/magicui/components/iphone.md): A realistic iPhone mockup for showcasing mobile app designs
- [Lens](https://mintlify.wiki/Max-Samson/magicui/components/lens.md): A interactive component that enables zooming into images, videos and other elements.
- [Light Rays](https://mintlify.wiki/Max-Samson/magicui/components/light-rays.md): An animated light rays effect that creates a realistic lighting atmosphere with swinging rays.
- [Line Shadow Text](https://mintlify.wiki/Max-Samson/magicui/components/line-shadow-text.md): A text component with a moving line shadow.
- [Magic Card](https://mintlify.wiki/Max-Samson/magicui/components/magic-card.md): A spotlight effect that follows your mouse cursor and highlights borders on hover.
- [Marquee](https://mintlify.wiki/Max-Samson/magicui/components/marquee.md): An infinite scrolling component for displaying text, images, or any content
- [Meteors](https://mintlify.wiki/Max-Samson/magicui/components/meteors.md): A meteor shower effect for background animations.
- [Morphing Text](https://mintlify.wiki/Max-Samson/magicui/components/morphing-text.md): A dynamic text morphing component for Magic UI.
- [Neon Gradient Card](https://mintlify.wiki/Max-Samson/magicui/components/neon-gradient-card.md): A beautiful neon card effect
- [Number Ticker](https://mintlify.wiki/Max-Samson/magicui/components/number-ticker.md): Animate numbers to count up or down to a target number
- [Orbiting Circles](https://mintlify.wiki/Max-Samson/magicui/components/orbiting-circles.md): A collection of circles which move in orbit along a circular path
- [Particles](https://mintlify.wiki/Max-Samson/magicui/components/particles.md): Interactive particle system with mouse-following behavior and customizable appearance.
- [Pixel Image](https://mintlify.wiki/Max-Samson/magicui/components/pixel-image.md): An image component that reveals itself with a pixelated fade-in animation effect.
- [Pointer](https://mintlify.wiki/Max-Samson/magicui/components/pointer.md): A component that displays a pointer when hovering over an element
- [Progressive Blur](https://mintlify.wiki/Max-Samson/magicui/components/progressive-blur.md): Add a progressive blur effect to scrollable content.
- [Pulsating Button](https://mintlify.wiki/Max-Samson/magicui/components/pulsating-button.md): An animated pulsating button useful for capturing attention of users.
- [Rainbow Button](https://mintlify.wiki/Max-Samson/magicui/components/rainbow-button.md): A button with an animated rainbow gradient border effect.
- [Retro Grid](https://mintlify.wiki/Max-Samson/magicui/components/retro-grid.md): An animated scrolling retro grid effect.
- [Ripple](https://mintlify.wiki/Max-Samson/magicui/components/ripple.md): An animated ripple effect typically used behind elements to emphasize them.
- [Ripple Button](https://mintlify.wiki/Max-Samson/magicui/components/ripple-button.md): A button with a ripple effect that animates from the click position.
- [Safari](https://mintlify.wiki/Max-Samson/magicui/components/safari.md): A Safari browser window mockup for showcasing websites and content
- [Scroll Based Velocity](https://mintlify.wiki/Max-Samson/magicui/components/scroll-based-velocity.md): A component that creates a scrolling velocity effect based on page scroll.
- [Scroll Progress](https://mintlify.wiki/Max-Samson/magicui/components/scroll-progress.md): Animated Scroll Progress for your pages
- [Shimmer Button](https://mintlify.wiki/Max-Samson/magicui/components/shimmer-button.md): A button with an animated shimmering border light effect
- [Shine Border](https://mintlify.wiki/Max-Samson/magicui/components/shine-border.md): An animated border with a radial gradient shine effect
- [Shiny Button](https://mintlify.wiki/Max-Samson/magicui/components/shiny-button.md): A button with an animated shiny effect that sweeps across the text.
- [Smooth Cursor](https://mintlify.wiki/Max-Samson/magicui/components/smooth-cursor.md): A customizable, physics-based smooth cursor animation component for React applications.
- [Sparkles Text](https://mintlify.wiki/Max-Samson/magicui/components/sparkles-text.md): A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
- [Spinning Text](https://mintlify.wiki/Max-Samson/magicui/components/spinning-text.md): The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
- [Striped Pattern](https://mintlify.wiki/Max-Samson/magicui/components/striped-pattern.md): A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
- [Terminal](https://mintlify.wiki/Max-Samson/magicui/components/terminal.md): A terminal-styled component with typing animations and sequential text display.
- [Text Animate](https://mintlify.wiki/Max-Samson/magicui/components/text-animate.md): A versatile text animation component with multiple animation presets and customization options.
- [Text Reveal](https://mintlify.wiki/Max-Samson/magicui/components/text-reveal.md): Fade in text as you scroll down the page.
- [Tweet Card](https://mintlify.wiki/Max-Samson/magicui/components/tweet-card.md): Display beautiful, embedded tweet cards with full support for media and metadata
- [Typing Animation](https://mintlify.wiki/Max-Samson/magicui/components/typing-animation.md): Characters appearing in typed animation
- [Video Text](https://mintlify.wiki/Max-Samson/magicui/components/video-text.md): A text component with a video background.
- [Warp Background](https://mintlify.wiki/Max-Samson/magicui/components/warp-background.md): A card with a time warping background effect.
- [Word Rotate](https://mintlify.wiki/Max-Samson/magicui/components/word-rotate.md): A vertical rotation of words
- [Contributing](https://mintlify.wiki/Max-Samson/magicui/contributing.md): Learn how to contribute components, effects, and improvements to Magic UI
- [Installation](https://mintlify.wiki/Max-Samson/magicui/installation.md): How to install dependencies and structure your app with Magic UI components.
- [Introduction](https://mintlify.wiki/Max-Samson/magicui/introduction.md): Create magical landing pages with animated React components that you can copy and paste into your apps.
- [MCP integration](https://mintlify.wiki/Max-Samson/magicui/mcp-integration.md): Learn how to use the Model Context Protocol with Magic UI for AI-assisted development.
- [Story](https://mintlify.wiki/Max-Samson/magicui/story.md): Learn about how Magic UI started and the philosophy behind beautiful, trustworthy design
- [AI Agent Template](https://mintlify.wiki/Max-Samson/magicui/templates/agent.md): The ultimate landing page template for your AI agent startup. Built with Next.js, TailwindCSS, and Motion.
- [Blog Template](https://mintlify.wiki/Max-Samson/magicui/templates/blog.md): A minimal blog template built using Next.js. Perfect for developers and content creators.
- [Changelog Template](https://mintlify.wiki/Max-Samson/magicui/templates/changelog.md): A minimal changelog template built using Next.js. Perfect for showcasing product updates and releases.
- [Codeforge Template](https://mintlify.wiki/Max-Samson/magicui/templates/codeforge.md): A professional landing page template designed for developer tools and workflow automation platforms. Built with Next.js, TailwindCSS, and Framer Motion.
- [Dev Tool Template](https://mintlify.wiki/Max-Samson/magicui/templates/devtool.md): The ultimate landing page template for your developer tool. Built with Next.js, TailwindCSS, and Framer Motion.
- [Mobile App Template](https://mintlify.wiki/Max-Samson/magicui/templates/mobile.md): The ultimate landing page template for your mobile app. Built with Next.js, TailwindCSS, and Framer Motion.
- [Templates Overview](https://mintlify.wiki/Max-Samson/magicui/templates/overview.md): Professional, production-ready landing page templates for your next project. Built with Next.js, TailwindCSS, and modern web technologies.
- [Portfolio Template](https://mintlify.wiki/Max-Samson/magicui/templates/portfolio.md): A minimal portfolio template to showcase your work and experience. Perfect for developers, designers, and creatives.
- [SaaS Template](https://mintlify.wiki/Max-Samson/magicui/templates/saas.md): The ultimate landing page template for your SaaS product. Built with Next.js, TailwindCSS, and Framer Motion.
- [Startup Template](https://mintlify.wiki/Max-Samson/magicui/templates/startup.md): The best landing page template for launching new ideas. Perfect for bootstrappers and pre-PMF VC backed startups.