Component

Magnetic Button

A real <button> that springs toward the cursor while hovered and ripples on press. It's keyboard focusable, activates on Enter/Space, shows a visible focus ring, and disables the magnetic offset under reduced motion.

Installation

Registry CLI — copy the source straight into your project:

$pnpm dlx shadcn@latest add @stacklyui/magnetic-button

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

It forwards all native button props (onClick, disabled, type…). Choose a variant (primary, secondary, ghost) and size (sm, md, lg). Tune the pull with strength.

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost"`	`"primary"`	Visual style of the button.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size.
`strength`	`number`	`12`	Max magnetic travel toward the cursor, in pixels.
`ripple`	`boolean`	`true`	Show an expanding ripple on press.