130 lines
8.5 KiB
Markdown
130 lines
8.5 KiB
Markdown
# Magic UI - Component Library Reference
|
|
|
|
> Beautifully designed landing page components built with React & Tailwind CSS. 80+ components.
|
|
> Docs: https://magicui.design | Repo: https://github.com/magicuidesign/magicui
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npx magicui-cli add <component-name>
|
|
```
|
|
|
|
## Component Categories
|
|
|
|
### Text Effects
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Animated Gradient Text | Gradient transitions for text | [docs](https://magicui.design/docs/components/animated-gradient-text) |
|
|
| Animated Shiny Text | Light glare shimmer on text | [docs](https://magicui.design/docs/components/animated-shiny-text) |
|
|
| Aurora Text | Aurora borealis text effect | [docs](https://magicui.design/docs/components/aurora-text) |
|
|
| Comic Text | Comic-style text animation | [docs](https://magicui.design/docs/components/comic-text) |
|
|
| Hyper Text | Scramble-then-reveal animation | [docs](https://magicui.design/docs/components/hyper-text) |
|
|
| Line Shadow Text | Moving line shadow on text | [docs](https://magicui.design/docs/components/line-shadow-text) |
|
|
| Morphing Text | Dynamic text morphing | [docs](https://magicui.design/docs/components/morphing-text) |
|
|
| Sparkles Text | Continuous sparkle animation | [docs](https://magicui.design/docs/components/sparkles-text) |
|
|
| Spinning Text | Circular motion text | [docs](https://magicui.design/docs/components/spinning-text) |
|
|
| Text Animate | Multiple text animation types | [docs](https://magicui.design/docs/components/text-animate) |
|
|
| Text Reveal | Fade-in on scroll | [docs](https://magicui.design/docs/components/text-reveal) |
|
|
| Typing Animation | Typewriter effect | [docs](https://magicui.design/docs/components/typing-animation) |
|
|
| Video Text | Video background in text | [docs](https://magicui.design/docs/components/video-text) |
|
|
| Word Rotate | Vertical word rotation | [docs](https://magicui.design/docs/components/word-rotate) |
|
|
| Highlighter | Marker-stroke highlight | [docs](https://magicui.design/docs/components/highlighter) |
|
|
|
|
### Buttons
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Shimmer Button | Light travels along perimeter | [docs](https://magicui.design/docs/components/shimmer-button) |
|
|
| Shiny Button | Dynamic shiny effect | [docs](https://magicui.design/docs/components/shiny-button) |
|
|
| Pulsating Button | Attention-capturing pulse | [docs](https://magicui.design/docs/components/pulsating-button) |
|
|
| Rainbow Button | Rainbow color animation | [docs](https://magicui.design/docs/components/rainbow-button) |
|
|
| Ripple Button | Click ripple effect | [docs](https://magicui.design/docs/components/ripple-button) |
|
|
| Interactive Hover Button | Hover interaction | [docs](https://magicui.design/docs/components/interactive-hover-button) |
|
|
|
|
### Backgrounds & Patterns
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Grid Pattern | SVG grid, customizable | [docs](https://magicui.design/docs/components/grid-pattern) |
|
|
| Animated Grid Pattern | Animated SVG grid | [docs](https://magicui.design/docs/components/animated-grid-pattern) |
|
|
| Interactive Grid Pattern | Mouse-interactive grid | [docs](https://magicui.design/docs/components/interactive-grid-pattern) |
|
|
| Dot Pattern | SVG dots background | [docs](https://magicui.design/docs/components/dot-pattern) |
|
|
| Striped Pattern | SVG stripes background | [docs](https://magicui.design/docs/components/striped-pattern) |
|
|
| Flickering Grid | Flickering cells grid | [docs](https://magicui.design/docs/components/flickering-grid) |
|
|
| Retro Grid | Animated scrolling retro grid | [docs](https://magicui.design/docs/components/retro-grid) |
|
|
| Warp Background | Time-warping effect | [docs](https://magicui.design/docs/components/warp-background) |
|
|
| Particles | Interactive particle system | [docs](https://magicui.design/docs/components/particles) |
|
|
| Light Rays | Animated light rays from above | [docs](https://magicui.design/docs/components/light-rays) |
|
|
|
|
### Cards & Borders
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Magic Card | Spotlight follows cursor | [docs](https://magicui.design/docs/components/magic-card) |
|
|
| Neon Gradient Card | Neon glow effect | [docs](https://magicui.design/docs/components/neon-gradient-card) |
|
|
| Border Beam | Animated light along border | [docs](https://magicui.design/docs/components/border-beam) |
|
|
| Shine Border | Animated shine border | [docs](https://magicui.design/docs/components/shine-border) |
|
|
|
|
### Layout & Navigation
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Bento Grid | Feature showcase grid | [docs](https://magicui.design/docs/components/bento-grid) |
|
|
| Dock | macOS-style dock | [docs](https://magicui.design/docs/components/dock) |
|
|
| Marquee | Infinite scroll (text/images) | [docs](https://magicui.design/docs/components/marquee) |
|
|
| File Tree | Directory structure display | [docs](https://magicui.design/docs/components/file-tree) |
|
|
| Terminal | Terminal mockup | [docs](https://magicui.design/docs/components/terminal) |
|
|
|
|
### Animated Effects
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Animated Beam | Light beam along path | [docs](https://magicui.design/docs/components/animated-beam) |
|
|
| Animated List | Sequential item animation | [docs](https://magicui.design/docs/components/animated-list) |
|
|
| Blur Fade | Smooth blur fade-in/out | [docs](https://magicui.design/docs/components/blur-fade) |
|
|
| Confetti | Celebration animations | [docs](https://magicui.design/docs/components/confetti) |
|
|
| Cool Mode | Fun click particle effect | [docs](https://magicui.design/docs/components/cool-mode) |
|
|
| Meteors | Meteor shower effect | [docs](https://magicui.design/docs/components/meteors) |
|
|
| Number Ticker | Count up/down animation | [docs](https://magicui.design/docs/components/number-ticker) |
|
|
| Orbiting Circles | Orbital motion circles | [docs](https://magicui.design/docs/components/orbiting-circles) |
|
|
| Ripple | Background ripple emphasis | [docs](https://magicui.design/docs/components/ripple) |
|
|
| Scroll Based Velocity | Speed-reactive scroll text | [docs](https://magicui.design/docs/components/scroll-based-velocity) |
|
|
| Scroll Progress | Page scroll indicator | [docs](https://magicui.design/docs/components/scroll-progress) |
|
|
| Progressive Blur | Blur gradient for scroll | [docs](https://magicui.design/docs/components/progressive-blur) |
|
|
| Smooth Cursor | Physics-based cursor | [docs](https://magicui.design/docs/components/smooth-cursor) |
|
|
| Pointer | Hover pointer indicator | [docs](https://magicui.design/docs/components/pointer) |
|
|
|
|
### Device Mockups
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Android | Android device mockup | [docs](https://magicui.design/docs/components/android) |
|
|
| iPhone | iPhone mockup | [docs](https://magicui.design/docs/components/iphone) |
|
|
| Safari | Safari browser mockup | [docs](https://magicui.design/docs/components/safari) |
|
|
|
|
### Data Display
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Globe | WebGL interactive globe | [docs](https://magicui.design/docs/components/globe) |
|
|
| Icon Cloud | 3D interactive tag cloud | [docs](https://magicui.design/docs/components/icon-cloud) |
|
|
| Animated Circular Progress | Circular gauge | [docs](https://magicui.design/docs/components/animated-circular-progress-bar) |
|
|
| Dotted Map | Map with dot markers | [docs](https://magicui.design/docs/components/dotted-map) |
|
|
| Pixel Image | Pixelated image effect | [docs](https://magicui.design/docs/components/pixel-image) |
|
|
| Lens | Zoom into images/videos | [docs](https://magicui.design/docs/components/lens) |
|
|
|
|
### Social & Media
|
|
| Component | Description | Docs |
|
|
|-----------|-------------|------|
|
|
| Tweet Card | Display tweet embed | [docs](https://magicui.design/docs/components/tweet-card) |
|
|
| Client Tweet Card | Client-side tweet card | [docs](https://magicui.design/docs/components/client-tweet-card) |
|
|
| Avatar Circles | Overlapping avatar stack | [docs](https://magicui.design/docs/components/avatar-circles) |
|
|
| Hero Video Dialog | Video dialog for hero | [docs](https://magicui.design/docs/components/hero-video-dialog) |
|
|
| Code Comparison | Side-by-side code diff | [docs](https://magicui.design/docs/components/code-comparison) |
|
|
| Theme Toggler | Animated theme switch | [docs](https://magicui.design/docs/components/animated-theme-toggler) |
|
|
|
|
## Usage Pattern
|
|
|
|
For docs lookup, use `docs-seeker` skill with Context7:
|
|
```
|
|
context7 query: "magicui <component-name> usage example"
|
|
```
|
|
|
|
For source code examples, fetch from GitHub:
|
|
```
|
|
https://github.com/magicuidesign/magicui/blob/main/example/<component>-demo.tsx
|
|
```
|