ns-ui
Destructive-action confirm gated on precision, not patience: rotate an SVG dial's notch to within 3deg of a fixed index, hold it there 400ms, and the dial snaps home and arms the confirm button — overshoot and it springs back like a slipping safe tumbler.
Use when a destructive confirm gated on fine-motor ACCURACY — rotate a dial notch within 3deg of the index and hold the dwell, or it springs back like a slipping tumbler; pick confirm-hold-ink for a time-based press-and-hold with no precision component, confirm-slide-shatter for a distance-based drag confirm, or dial-moire when the dial itself is the deliverable (a value/message to tune into) rather than a gate in front of a separate destructive action.
Install
npx shadcn add https://design.helpmarq.comns-ui / confirm-dial-align — align the notch, hold it, then confirm
| Prop | Type | Default | Description |
|---|---|---|---|
| destructiveLabel? | ReactNode | "Delete organization" | — |
| doneLabel? | ReactNode | "Deleted" | — |
| confirmWord? | string | "delete" | word the type-to-confirm fallback checks against, case-insensitive |
| initialAngle? | number | 150 | starting dial offset in degrees from the index mark |
| onConfirm? | () => void | — | — |
| className? | string | — | — |