ns-ui / success-plumb-bob
Order total $49.00
ns-ui / loud
A success moment built on a plumb bob instead of confetti or a checkmark — the bob drops, overshoots into a damped pendulum swing, and the instant it settles collinear with a fixed datum line, a level line draws outward from its tip and the success text rises onto it.
Use when a success/confirmation moment that reads as a quiet, checked instrument rather than a celebration — a plumb bob drops, overshoots and swings with honest damped decay, and only once it settles collinear with a fixed datum line does a level line draw outward and the success text set onto it; the coincidence of string and datum IS the proof, not a separate checkmark symbol. Distinct from confirm-hold-ink (that's the press gesture BEFORE commit, destructive-action ink fill); success-plumb-bob starts AFTER the event already happened (payment confirmed, deploy finished) and only visualizes verification of an outcome already decided.
Install
npx shadcn add https://design.helpmarq.comns-ui / success-plumb-bob
Order total $49.00
| Prop | Type | Default | Description |
|---|---|---|---|
| pendingCopy? | string | — | small line above the trigger, shown only while pending |
| pendingLabel? | string | — | label on the trigger button before it's pressed |
| armingLabel? | string | — | label shown on the button while the bob is dropping/swinging |
| successMessage? | string | — | announced immediately (role=status) and set onto the level line at rest |
| nextActionLabel? | string | — | label the same button carries once settled — the real next action |
| onConfirm? | () => void | — | fires synchronously at press, before any motion — this *is* the event |
| onNextAction? | () => void | — | fires when the settled button is pressed |
| className? | string | — | — |