Browse components
Crosshair
Full-bleed crosshair lines with live coordinates that tear and glitch when you hover a link.
Installation
npx shadcn@latest add @glint-ui/crosshairFirst 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/crosshair.json
Usage
import { Crosshair } from "@/components/ui/crosshair";
<Crosshair className="h-screen">
<nav>...</nav>
</Crosshair>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content under the crosshair. |
| color | string | "#ffffff" | Line and label color. |
| thickness | number | 1 | Line width in px. |
| showCoords | boolean | true | Show live x/y readouts on the lines. |
| glitch | boolean | true | Distort the lines briefly when the pointer enters a target. |
| targetSelector | string | "a, button" | Elements that trigger the glitch. |
| hideCursor | boolean | true | Hide the native cursor inside the container. |
| className | string | — | Extra classes for the root element. |