Magnetic Button
Free
A call to action that leans toward the pointer and springs back when it leaves.
Customize
0.35
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/magnetic-button.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/magnetic-button.tsx.
Usage
import { MagneticButton } from "@/components/ui/magnetic-button";
<MagneticButton strength={0.35} onClick={signUp}>
Get started
</MagneticButton>Props
4 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button content. |
| strength | number | 0.35 | How strongly the button follows the pointer, 0 to 1. |
| onClick | () => void | — | Click handler. |
| className | string | — | Extra classes for the button. |
Dependencies: motion