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 degreesHEADING · 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
- value / defaultValue
- number
- default —
- Controlled or initial bearing, 0 (N) clockwise to 359.
- onChange
- (deg) => void
- default —
- Fires the settled bearing once it snaps to a detent.
- detent
- number
- default 45
- Detent grid in degrees; 45 gives the 8-point rose.
- height
- number
- default 300
- Dial size in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | — | Controlled or initial bearing, 0 (N) clockwise to 359. |
| onChange | (deg) => void | — | Fires the settled bearing once it snaps to a detent. |
| detent | number | 45 | Detent grid in degrees; 45 gives the 8-point rose. |
| height | number | 300 | Dial size in px. |