Shadcn.io is not affiliated with official shadcn/ui
Magnetic Button
Button that magnetically follows the cursor with spring physics for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Magnetic Button preview
A subtle, satisfying CTA. As your cursor moves across the button it gently follows, then springs back when you leave. The pull is quiet enough for serious products yet rewarding enough to make users hover again. Perfect for hero CTAs, primary actions on landing pages, or anywhere you want a touch of motion without distraction. Built on top of the shadcn Button so every variant and size you already use just works.
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
Depth Button
Tactile 3D press
Ripple Button
Material click ripple
Flip Button
3D card flip reveal
Spotlight Button
Cursor-following light
Arrow Button
Hover slides in arrow
Pill Button
Pill with inset highlight
FAQ
Was this page helpful?
Sign in to leave feedback.
Long Press Button
Button that requires a press-and-hold gesture to confirm, with a progress fill that animates while held for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Neon Button
Button with glowing neon effect and subtle flicker on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.