Browse components
Magnet
Pulls its children toward the cursor when it gets close.
Hover near me
Installation
npx shadcn@latest add @glint-ui/magnetFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/magnet.json
Usage
import { Magnet } from "@/components/ui/magnet";
<Magnet padding={80}>
<button>Hover near me</button>
</Magnet>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to attract. |
| padding | number | 80 | Extra px around the element where the pull starts. |
| strength | number | 3 | Higher is weaker: offset = distance / strength. |
| className | string | — | Extra classes for the root element. |