KQ-1573 · BEVEL/GAUGE

Bevel Gauge

A cursor that measures angles: it carries a sliding bevel, and a press and drag slides the stock out from the press point on springs.flick while the blade opens 1:1 under the pointer and a protractor fans out between them with graduations ticking in and a live readout. Near a detent the blade catches it on springs.snap with the drag's own angular speed and a tick, letting go back to the finger on flick when pulled past; release and the bevel lifts away leaving an angular dimension whose label lands on springs.recoil. The surface is a real slider from 0 to 180 degrees — arrows turn the arm a degree, Shift a tenth, Page Up and Page Down jump detents — reading degrees, roof pitch in 12, radians or gradians.

KQ-1573 · BEVEL/GAUGE

Gaugeworks · Truss T-04

Check the pitch before you cut.

drag from a joint · the heel reads 30.0° · 6.9 in 12

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/bevel-gauge

Props

value / defaultValue: number; default 30; The measured angle in degrees, 0 to 180: controlled, or drawn at first when uncontrolled.
onValueChange: (degrees: number) => void; default —; Fires from the drag or the key that changed the angle, with the new angle in degrees.
onMeasure: (degrees: number) => void; default —; Fires when a measurement is set down: the pointer lifts, or a key turns the arm.
snapAngle: number; default 15; The detent spacing in degrees; 0 turns snapping off.
snapTolerance: number; default 3; How close to a detent the blade must come to catch it, degrees.
scale: "degrees" | "pitch" | "radians" | "grads"; default "degrees"; The graduations and the readout: degrees, roof pitch in 12, radians or gradians.
ink: "cobalt" | "graphite" | "carmine" | "signal" | string; default "cobalt"; The ink the dimension and the protractor are drawn in: a named ink or any CSS colour.
precision: number; default 1; Decimals in the readout (radians add two).
radius: number; default 56; The protractor's radius, px; three quarters of it on a small box.
reach: number; default 220; The longest the blade opens, px.
graduations: boolean; default true; Tick marks and numbers on the protractor.
pivot: [number, number]; default [0.3, 0.72]; Where the bevel sits before the first press, as fractions of the box.
children: React.ReactNode; default —; What is being measured: a plan, a drawing, a photograph. Drawn under the gauge.
interactive: boolean; default true; Pressing and dragging measures.
disabled: boolean; default false; Nothing measures and the keys do nothing.
sound: boolean; default false; A tick as the blade catches each detent. Off unless asked for.
label: string; default "Angle"; The gauge's accessible name.
className: string; default "h-56 w-full"; Sizes the measuring surface.

Prop	Type	Default	Description
value / defaultValue	number	30	The measured angle in degrees, 0 to 180: controlled, or drawn at first when uncontrolled.
onValueChange	(degrees: number) => void	—	Fires from the drag or the key that changed the angle, with the new angle in degrees.
onMeasure	(degrees: number) => void	—	Fires when a measurement is set down: the pointer lifts, or a key turns the arm.
snapAngle	number	15	The detent spacing in degrees; 0 turns snapping off.
snapTolerance	number	3	How close to a detent the blade must come to catch it, degrees.
scale	"degrees" \| "pitch" \| "radians" \| "grads"	"degrees"	The graduations and the readout: degrees, roof pitch in 12, radians or gradians.
ink	"cobalt" \| "graphite" \| "carmine" \| "signal" \| string	"cobalt"	The ink the dimension and the protractor are drawn in: a named ink or any CSS colour.
precision	number	1	Decimals in the readout (radians add two).
radius	number	56	The protractor's radius, px; three quarters of it on a small box.
reach	number	220	The longest the blade opens, px.
graduations	boolean	true	Tick marks and numbers on the protractor.
pivot	[number, number]	[0.3, 0.72]	Where the bevel sits before the first press, as fractions of the box.
children	React.ReactNode	—	What is being measured: a plan, a drawing, a photograph. Drawn under the gauge.
interactive	boolean	true	Pressing and dragging measures.
disabled	boolean	false	Nothing measures and the keys do nothing.
sound	boolean	false	A tick as the blade catches each detent. Off unless asked for.
label	string	"Angle"	The gauge's accessible name.
className	string	"h-56 w-full"	Sizes the measuring surface.