KQ-147 · COMPASS/NEEDLE

Compass Needle

A bearing picker with a magnetic settle — the needle tracks the pointer bearing as you drag around the rose, then on release swings the short way to the nearest cardinal detent and wobbles home like a magnetized compass; the arrow keys step it point by point.

KQ-147 · COMPASS/NEEDLE

BEARING SET · 08 POINTS

KQ-147

BEARING·000°·N
N 000 degrees

HEADING · N · 000°

Drag the dial - the needle wobbles home to the nearest point.

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/compass-needle

Props

PropTypeDefaultDescription
value / defaultValuenumberControlled or initial bearing, 0 (N) clockwise to 359.
onChange(deg) => voidFires the settled bearing once it snaps to a detent.
detentnumber45Detent grid in degrees; 45 gives the 8-point rose.
heightnumber300Dial size in px.