ns-ui
A determinate progress bar that advances by capillary action — quick pull, slowing soak, brief dwell, next pull — with a faint wet-front runner previewing the track a few pixels ahead of the true fill, so bursty real-world progress (chunked uploads) reads as natural rather than janky.
Use when a determinate progress bar for uploads or multi-step completion where the underlying progress genuinely arrives in bursts (chunked uploads, multi-file copy) and a smooth glide would look like it's lying about its own cadence — progress-wick's draw-dwell rhythm makes bursty progress look like its native gait instead of a stutter, and it doubles as a slow-draw indeterminate mode for unknown-duration waits. Pick progress-narrated instead when the progress has a small number of named phases worth narrating (a build, an onboarding checklist) and a typed mono caption plus a docked timestamped ledger is the point. This is not a level/quantity gauge: pick meter-quota-meniscus instead for a soft/hard-limit quota reading, where the signal is a vessel's liquid curvature at a fixed cap, not transport along a line.
Install
npx shadcn add https://design.helpmarq.com /r/progress-wick.jsonns-ui / progress-wick
hover the panel to pause
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | true progress, 0-100 (controlled). Ignored while `indeterminate` is set. |
| indeterminate? | boolean | — | unknown-duration mode: the wet front alone travels the track in slow draws, no fill |
| label? | string | — | visible + accessible label, e.g. "Uploading assets.zip" (default "Progress") |
| announceMilestones? | boolean | — | announce 25/50/75/100% crossings via a polite live region (default true) |
| className? | string | — | — |