Preview live, install via shadcn or copy the source.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| color | string | white | No | Line color. Applies to CrosshairCursor (global) and CrosshairCursorArea (bounded). |
| lineWidth | number | 1 | No | Line width in px. |
| dotColor | string | — | No | Center dot color (defaults to color). |
| dotSize | number | 6 | No | Center dot diameter in px. |
| gap | number | 7 | No | Gap around dot where lines break (px). |
| showCoordinates | boolean | true | No | Show X/Y coordinate labels on the axes. |
| coordinateMode | "px" | "percentage" | "both" | px | No | Coordinate formatting mode. |
| showDot | boolean | true | No | Show center dot. |
| zIndex | number | 50 | No | Z-index for overlay (Area defaults to 20). |
| hideNativeCursor | boolean | false | No | Hide native cursor when active. Area defaults to true (cursor-none inside). |
| smooth | number | 0.18 | No | Smooth follow factor 0–1 (0 = instant). |
| disableOnTouch | boolean | true | No | Disable on coarse pointers (touch). |
| containerRef | React.RefObject<HTMLElement | null> | — | No | Optional bounding container ref for CrosshairCursor – axes clip to its rect. |
| containerSelector | string | — | No | Selector for bounding container (alternative to ref) for CrosshairCursor. |
| stickToEdge | boolean | true | No | When bounded, clamp to closest edge when cursor is outside. |
| hideOnLeave | boolean | true | No | Hide crosshair when mouse leaves viewport/container. |
| children | React.ReactNode | — | No | Content inside CrosshairCursorArea (bounded mode). |
| showBrackets | boolean | true | No | Show corner brackets (Area). |
| showBorder | boolean | false | No | Show border ring around Area. |
| className | string | — | No | Additional class for overlay / area wrapper. |
| labelClassName | string | — | No | Class for coordinate labels. |
| lineClassName | string | — | No | Class for line segments. |
| dotClassName | string | — | No | Class for center dot. |