Browse components
Cursor Highlight
A soft glow follows the cursor and springs into a pill that wraps whatever link or card you hover.
Installation
npx shadcn@latest add @glint-ui/cursor-highlightFirst 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/cursor-highlight.json
Usage
import { CursorHighlight } from "@/components/ui/cursor-highlight";
<CursorHighlight>
<nav className="flex gap-2">
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>
</CursorHighlight>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Links, buttons or tiles to highlight. |
| selector | string | "[data-highlight], a, button" | Elements the highlight snaps to. |
| color | string | "#c6ff3d" | Highlight color. |
| opacity | number | 0.16 | Peak opacity of the highlight. |
| blobSize | number | 90 | Diameter of the free-floating blob in px. |
| padding | number | 4 | Px the highlight extends past a hovered element. |
| radius | number | 12 | Corner radius when wrapped around an element, in px. |
| stiffness | number | 0.2 | Spring stiffness. Higher = snappier. |
| className | string | — | Extra classes for the root element. |