All components
Magnetic Button
ButtonsA button magnetically attracted to the cursor while hovered.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/magnetic-button.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/magnetic-button.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| strength | number | 0.4 | How strongly the button follows the cursor (0-1). |
| onClick | () => void | - | Click handler. |
Accessibility
- Pointer-only motion - keyboard focus and activation are unaffected.
- Returns to rest on mouse leave, so it never drifts away.
- A real <button> underneath the motion wrapper.
Dependencies
motionclsxtailwind-merge