Magnetic

Pulls a button or icon toward a nearby pointer and springs back when it leaves. An optional inner layer moves further for depth.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/magnetic

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Icon buttons in a footer or contact row. Neighbours need a lighter pull and a short reach so they never bump into each other.

Two pill buttons side by side. The primary pulls harder than the secondary, and a small padding with a wide gap keeps their reach from overlapping.