KQ-1418 · SIGHT/LINES

Sight Lines

A precision measuring overlay bounded to the container it wraps: four hairlines run in from the edges to the pointer, each with its length in a mono pill, over tick rulers that mark the pointer's coordinate, and the lines ease after the pointer on springs.glide while the crosshair cursor stays exactly under the hand. Reaching a child opens the meeting point into the child's box on springs.snap — the lines retract to its edges and measure its margins, a hairline box outlines it, the readout becomes its width × height and the ruler markers widen into its span — and leaving releases the lines back to the pointer on springs.glide. Keyboard focus on a child snaps the lines to it exactly as hover does.

KQ-1418 · SIGHT/LINES

Waylight Mini

Desk lamp · warm dim · $148

tracking · point at a block or press Tab

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/sight-lines

Props

children: React.ReactNode; default —; The content being measured; it keeps every click, focus and key.
labels: "px" | "rem" | "percent" | "none"; default "px"; The unit of the distance labels and the readout, or "none" to hide the labels.
snap: boolean; default true; Hovering (or focusing) a child snaps the lines to its edges and shows its size.
color: "cobalt" | "redline" | "signal" | "ink" | string; default "cobalt"; The hairline tone: a named tone from the theme or any CSS colour.
targets: string; default [data-measure] and interactive elements; What the lines snap to, as a CSS selector; disabled controls never snap.
follow: "flick" | "snap" | "glide"; default "glide"; The house spring the lines ease after the pointer on.
ticks: boolean; default true; Tick rulers along the four edges, with a marker at the pointer's coordinate that widens into a snapped child's span.
tickStep: number; default 8; Distance between minor ticks, in px; every fifth is a major tick.
dashed: boolean; default false; Dashed hairlines instead of solid ones.
thickness: number; default 1; Hairline thickness, in px.
readout: boolean; default true; A small tag with the pointer's coordinates, or a snapped child's width × height.
rest: "home" | "center" | "none"; default "home"; Where the lines rest with nobody pointing: dimly on the [data-measure-home] child (or the first target), at the centre, or hidden.
crosshair: boolean; default true; A crosshair cursor inside the container; text fields keep the I-beam.
precision: number; default 0; Decimals in pixel labels.
rootSize: number; default 16; Pixels per rem, for rem labels.
disabled: boolean; default false; Turn the overlay off.
onMeasure: (measure: SightLinesMeasure | null) => void; default —; Fires when the lines snap onto a child — with its label, size and distance from each edge in px — and with null when they let go.
className: string; default —; Classes for the container.

Prop	Type	Default	Description
children	React.ReactNode	—	The content being measured; it keeps every click, focus and key.
labels	"px" \| "rem" \| "percent" \| "none"	"px"	The unit of the distance labels and the readout, or "none" to hide the labels.
snap	boolean	true	Hovering (or focusing) a child snaps the lines to its edges and shows its size.
color	"cobalt" \| "redline" \| "signal" \| "ink" \| string	"cobalt"	The hairline tone: a named tone from the theme or any CSS colour.
targets	string	[data-measure] and interactive elements	What the lines snap to, as a CSS selector; disabled controls never snap.
follow	"flick" \| "snap" \| "glide"	"glide"	The house spring the lines ease after the pointer on.
ticks	boolean	true	Tick rulers along the four edges, with a marker at the pointer's coordinate that widens into a snapped child's span.
tickStep	number	8	Distance between minor ticks, in px; every fifth is a major tick.
dashed	boolean	false	Dashed hairlines instead of solid ones.
thickness	number	1	Hairline thickness, in px.
readout	boolean	true	A small tag with the pointer's coordinates, or a snapped child's width × height.
rest	"home" \| "center" \| "none"	"home"	Where the lines rest with nobody pointing: dimly on the [data-measure-home] child (or the first target), at the centre, or hidden.
crosshair	boolean	true	A crosshair cursor inside the container; text fields keep the I-beam.
precision	number	0	Decimals in pixel labels.
rootSize	number	16	Pixels per rem, for rem labels.
disabled	boolean	false	Turn the overlay off.
onMeasure	(measure: SightLinesMeasure \| null) => void	—	Fires when the lines snap onto a child — with its label, size and distance from each edge in px — and with null when they let go.
className	string	—	Classes for the container.