Shadcn.io is not affiliated with official shadcn/ui
Magnetic Button
Button with floating particles that magnetically attract on hover for React.
Magnetic Button preview
Hover and watch the magic happen. Scattered dots orbit your button, then whoosh—they all rush to the center like iron filings to a magnet. The spring physics feel natural and satisfying. It's that unexpected bit of delight that makes users hover again just to see it. Perfect for hero sections, product launches, or anywhere you want your CTA to feel alive. The particles work on touch too—mobile users get the same "oooh" moment.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the magnetic-button button into my projectRelated Components
Pulse Button
Pulsing attention ring
Shine Button
Diagonal light sweep
Ripple Button
Material Design ripple
Liquid Button
Fluid fill animation
Bounce Button
Elastic click bounce
Glow Border Button
Rotating gradient glow
FAQ
Was this page helpful?
Sign in to leave feedback.