Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { Meteors } from "@/registry/magicui/meteors";
export function MeteorDemo() {
return (
<div className="relative overflow-hidden h-[500px] w-full">
<Meteors number={30} />
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/meteors
Usage
import { Meteors } from "@/components/magicui/meteors";<div className="relative overflow-hidden h-[500px] w-full">
<Meteors />
</div>Props
Meteors
| Prop | Type | Default | Description |
|---|---|---|---|
number | number | 20 | Number of meteors |
minDelay | number | 0.2 | Minimum delay in seconds before meteor animation starts |
maxDelay | number | 1.2 | Maximum delay in seconds before meteor animation starts |
minDuration | number | 2 | Minimum duration in seconds for meteor animation |
maxDuration | number | 10 | Maximum duration in seconds for meteor animation |
angle | number | 215 | Angle in degrees for meteor trajectory |
className | string | - | Optional additional CSS classes |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development