components

Magnetic Button

A button with magnet effect on hover.

Live Preview

Installation

$ pnpm dlx shadcn@latest add https://themainakb.com/r/magnetic-button.json

Features

  • Magnetic Hover Effect – Smoothly follows the cursor for a natural, interactive experience.
  • Customizable Strength – Adjust the magnetic movement intensity with a single strength prop.
  • Fully Customizable – Supports all native button props and custom styling via className.

Usage

import { MagneticButton } from "@/components/magnetic-button.tsx";
<MagneticButton onClick={() => console.log("Namaste")}>
  Hover Over Me
</MagneticButton>

Credit