Magnetic

Magnetic preview

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.

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 component for you — no copy-paste, no CLI:

use shadcnio to install the magnetic component into my project

Related Components

FAQ