Magnetic

Wrap any element and it pulls toward the cursor like a magnet. Buttons lean toward your mouse as you approach—a small detail that makes interfaces feel more responsive. Movement is smooth, not jarring. Automatically disabled on touch devices where there's no cursor to track. Works well for call-to-action buttons, navigation items, or anywhere you want to add a bit of playfulness.

Magnetic preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/magnetic.json

npx shadcn@latest add https://www.shadcn.io/r/magnetic.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/magnetic.json

bunx shadcn@latest add https://www.shadcn.io/r/magnetic.json

Related Components

FAQ