Full-width dashed guide lines follow the pointer with X and Y readout chips and a dot that snaps to a grid, like a design tool ruler.
npx shadcn@latest add https://hyperblur.dev/r/cursor-crosshair.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-crosshair.tsx.
import { CursorCrosshair } from "@/components/hyperblur/cursor-crosshair"
<CursorCrosshair className="h-80" snap={16} />| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Guide line, dot and chip color. |
| snap | number | 20 | Grid step in pixels the dot snaps to. |
| showGrid | boolean | true | Draw a faint grid behind the content at the snap step. |
| showReadout | boolean | true | Show the coordinate chips. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |