# Magic UI

> 150+ free, open-source animated React components and effects built with Tailwind CSS and Motion.

- Owner: [Dillion Verma](https://21st.dev/@dillionverma)
- Components: 62
- Website: https://magicui.design/?ref=serafim
- GitHub: https://github.com/magicuidesign/magicui
- Live page: https://21st.dev/@dillionverma/library/magic-ui

## Components

All 62 of them:

- [Android](https://21st.dev/@dillionverma/components/android.md)
- [Animated Beam](https://21st.dev/@dillionverma/components/animated-beam.md)
- [Animated Circular Progress Bar](https://21st.dev/@dillionverma/components/animated-circular-progress-bar.md)
- [Animated Gradient Text](https://21st.dev/@dillionverma/components/animated-gradient-text.md)
- [Animated Grid Pattern](https://21st.dev/@dillionverma/components/animated-grid-pattern.md)
- [Animated List](https://21st.dev/@dillionverma/components/animated-list.md)
- [Animated Shiny Text](https://21st.dev/@dillionverma/components/animated-shiny-text.md)
- [Animated Subscribe Button](https://21st.dev/@dillionverma/components/animated-subscribe-button.md)
- [Avatar Circles](https://21st.dev/@dillionverma/components/avatar-circles.md)
- [Bento Grid](https://21st.dev/@dillionverma/components/bento-grid.md)
- [Blur Fade](https://21st.dev/@dillionverma/components/blur-fade.md)
- [Blur In](https://21st.dev/@dillionverma/components/blur-in.md)
- [Border Beam](https://21st.dev/@dillionverma/components/border-beam.md)
- [Code Comparison](https://21st.dev/@dillionverma/components/code-comparison.md)
- [Comic Text](https://21st.dev/@dillionverma/components/comic-text.md)
- [Confetti](https://21st.dev/@dillionverma/components/confetti.md)
- [Cool Mode](https://21st.dev/@dillionverma/components/cool-mode.md)
- [Dock](https://21st.dev/@dillionverma/components/dock.md)
- [Dot Pattern](https://21st.dev/@dillionverma/components/dot-pattern.md)
- [Fade Text](https://21st.dev/@dillionverma/components/fade-text.md)
- [File Tree](https://21st.dev/@dillionverma/components/file-tree.md)
- [Flickering Grid](https://21st.dev/@dillionverma/components/flickering-grid.md)
- [Flip Text](https://21st.dev/@dillionverma/components/flip-text.md)
- [Globe](https://21st.dev/@dillionverma/components/globe.md)
- [Gradual Spacing](https://21st.dev/@dillionverma/components/gradual-spacing.md)
- [Grid Pattern](https://21st.dev/@dillionverma/components/grid-pattern.md)
- [Hero Video Dialog](https://21st.dev/@dillionverma/components/hero-video-dialog.md)
- [Hyper Text](https://21st.dev/@dillionverma/components/hyper-text.md)
- [Interactive Hover Button](https://21st.dev/@dillionverma/components/interactive-hover-button.md)
- [Interactive Icon Cloud](https://21st.dev/@dillionverma/components/interactive-icon-cloud.md)
- [iPhone 15 Pro](https://21st.dev/@dillionverma/components/iphone-15-pro.md)
- [Line Shadow Text](https://21st.dev/@dillionverma/components/line-shadow-text.md)
- [Magic Card](https://21st.dev/@dillionverma/components/magic-card.md)
- [Marquee](https://21st.dev/@dillionverma/components/marquee.md)
- [Meteors](https://21st.dev/@dillionverma/components/meteors.md)
- [Morphing Text](https://21st.dev/@dillionverma/components/morphing-text.md)
- [Neon Gradient Card](https://21st.dev/@dillionverma/components/neon-gradient-card.md)
- [Number Ticker](https://21st.dev/@dillionverma/components/number-ticker.md)
- [Orbiting Circles](https://21st.dev/@dillionverma/components/orbiting-circles.md)
- [Particles](https://21st.dev/@dillionverma/components/particles.md)
- [Pixel Image](https://21st.dev/@dillionverma/components/pixel-image.md)
- [Pointer](https://21st.dev/@dillionverma/components/pointer.md)
- [Progressive Blur](https://21st.dev/@dillionverma/components/progressive-blur.md)
- [Rainbow Button](https://21st.dev/@dillionverma/components/rainbow-button.md)
- [Retro Grid](https://21st.dev/@dillionverma/components/retro-grid.md)
- [Ripple](https://21st.dev/@dillionverma/components/ripple.md)
- [Ripple Button](https://21st.dev/@dillionverma/components/ripple-button.md)
- [Safari](https://21st.dev/@dillionverma/components/safari.md)
- [Scratch To Reveal](https://21st.dev/@dillionverma/components/scratch-to-reveal.md)
- [Script Copy Button](https://21st.dev/@dillionverma/components/script-copy-button.md)
- [Scroll Based Velocity](https://21st.dev/@dillionverma/components/scroll-based-velocity.md)
- [Shimmer Button](https://21st.dev/@dillionverma/components/shimmer-button.md)
- [Shine Border](https://21st.dev/@dillionverma/components/shine-border.md)
- [Shiny Button](https://21st.dev/@dillionverma/components/shiny-button.md)
- [Smooth Cursor](https://21st.dev/@dillionverma/components/smooth-cursor.md)
- [Sparkles Text](https://21st.dev/@dillionverma/components/sparkles-text.md)
- [Text Reveal](https://21st.dev/@dillionverma/components/text-reveal.md)
- [Typing Animation](https://21st.dev/@dillionverma/components/typing-animation.md)
- [Warp Background](https://21st.dev/@dillionverma/components/warp-background.md)
- [Word Fade In](https://21st.dev/@dillionverma/components/word-fade-in.md)
- [Word Pull Up](https://21st.dev/@dillionverma/components/word-pull-up.md)
- [Word Rotate](https://21st.dev/@dillionverma/components/word-rotate.md)

Full component directory: https://21st.dev/llms.txt