Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Ripple
import { Ripple } from "@/registry/magicui/ripple";
export function RippleDemo() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background">
<p className="z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-white">
Ripple
</p>
<Ripple />
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/ripple
Usage
import { Ripple } from "@/components/magicui/ripple";
<div className="relative h-[500px] w-full overflow-hidden">
<Ripple />
</div>
Props
Prop | Type | Default | Description |
---|---|---|---|
mainCircleSize | number | 210 | The size of the main circle in pixels |
mainCircleOpacity | number | 0.24 | The opacity of the main circle |
numCircles | number | 8 | The number of ripple circles to render |
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