Target Cursor
A four-corner reticle cursor that locks onto and frames target elements, spinning while idle and opening out to frame the bounds on a hit.
A four-corner reticle cursor. While idle it is a small slowly spinning square that follows the mouse, and when the cursor lands on an element matching targetSelector, the four corner brackets open out smoothly to frame that element's bounds.
npx shadcn@latest add https://webberui.com/r/target-cursor.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<TargetCursor />
Installation
npx shadcn@latest add https://webberui.com/r/target-cursor.jsonOr, once registries are configured in components.json, install it as @webberui/target-cursor.
Usage
Wrap a region in TargetCursor and add the data-target attribute to the elements you want locked onto (customizable via targetSelector).
import { TargetCursor } from "@/components/ui/target-cursor";
<TargetCursor className="relative h-[320px] w-full rounded-xl border">
<button data-target>Launch</button>
<a data-target href="#">Docs</a>
</TargetCursor>Hit testing uses element.closest(targetSelector), so pointing at any descendant of a target locks onto the whole target as well.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
targetSelector | string | "[data-target]" | CSS selector for the targets to lock onto |
color | string | "currentColor" | Reticle color, following the container's text color |
spinSize | number | 26 | Side length of the idle reticle square (px) |
cornerLength | number | 12 | Corner bracket arm length (px) |
cornerThickness | number | 2 | Corner bracket line width (px) |
padding | number | 6 | Padding by which the frame expands beyond the target when locked (px) |
spinDuration | number | 6 | Seconds per idle spin revolution |
dotSize | number | 5 | Center dot diameter (px) |
className | string | — | Container styling, defining the reticle's scope and height |
Accessibility
- When the user has "reduce motion" enabled at the system level, the native cursor and the content are rendered directly with no custom reticle applied
- The reticle layer is
aria-hiddenand decorative only; coarse-pointer devices (touch) restore the native cursor automatically - The color defaults to
currentColor, so contrast holds automatically in both light and dark themes