Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { PulsatingButton } from "@/registry/magicui/pulsating-button";
export function PulsatingButtonDemo() {
return <PulsatingButton>Join Affiliate Program</PulsatingButton>;
}
Installation
pnpm dlx shadcn@latest add @magicui/pulsating-button
Usage
import { PulsatingButton } from "@/components/magicui/pulsating-button";<PulsatingButton>Pulsating Button</PulsatingButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content of the button. |
className | string | - | Additional class names for the button. |
pulseColor | string | - | The rbg numbers only for the color of the pulsing waves. |
duration | string | - | The time span of one pulse. |
Credits
- Credit to @shikhap04
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