Buttons

Magnetic Button

A button that subtly follows the cursor when hovering near it. Uses Framer Motion for smooth, spring-based tracking with customizable magnetic strength.

Dependencies

@radix-ui/react-slot
class-variance-authority
clsx
tailwind-merge
framer-motion

Files

components/ui/magnetic-button.tsx

Installation

Using shadcn CLI

npx shadcn add magnetic-button --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge framer-motion