Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { InteractiveHoverButton } from "@/registry/magicui/interactive-hover-button";
export function InteractiveHoverButtonDemo() {
return <InteractiveHoverButton>Hover Me</InteractiveHoverButton>;
}
Installation
pnpm dlx shadcn@latest add @magicui/interactive-hover-button
Usage
import { InteractiveHoverButton } from "@/components/magicui/interactive-hover-button";<InteractiveHoverButton>Interactive Hover Button</InteractiveHoverButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Button | The text to be displayed inside the button |
className | string | - | Additional class names to style the component |
Credits
- Credit to @AayushBharti
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