The MagneticButton component drifts toward the pointer as it approaches and springs back when the pointer leaves, making calls to action feel responsive before they are even clicked.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/magnetic-button.jsonEverything Magnetic Button accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Button label or content |
| strength | number | 18 | How far the button travels toward the pointer, in pixels |
| radius | number | 120 | Distance from the button, in pixels, at which it starts reacting |
| className | string | '' | Additional CSS classes for styling |
| ...props | ButtonHTMLAttributes | No default | Any other native button props, including onClick, type and disabled |
Required.