Magnetic Button

A button that magnetically follows the cursor on hover.

magnetic-button.tsx

Installation

Terminal

npx shadcn@latest add "https://sniper-ui-coral.vercel.app/r/magnetic-button.json"

Auto-Installed Dependencies

The CLI will automatically install these packages.

Terminal

npm install framer-motion clsx tailwind-merge

Usage

Basic

page.tsx

import { MagneticButton } from "@/components/ui/magnetic-button";

export default function MyPage() {
  return (
    <MagneticButton>
      Click me
    </MagneticButton>
  );
}

Examples

examples.tsx

import { MagneticButton } from "@/components/ui/magnetic-button";

export default function MyPage() {
  return (
    <div className="flex gap-4">
      {/* Default strength */}
      <MagneticButton>Default</MagneticButton>

      {/* Stronger pull */}
      <MagneticButton strength={80}>Strong Pull</MagneticButton>

      {/* Custom styled */}
      <MagneticButton className="rounded-full px-6">
        Rounded
      </MagneticButton>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`—`	The button content.
`className`	`string`	`—`	Additional CSS classes to apply.
`strength`	`number`	`40`	Controls how strongly the button follows the cursor. Higher = more movement.

Sniper UI

An open-source library available on GitHub — contribute or star the repo to support it.

Contribute