ns-ui
Determinate progress bar whose leading edge narrates each phase in typed mono, then docks it below the track as a timestamped milestone ledger.
Use when a determinate run made of named stages worth telling the user about (uploading, transcoding, verifying) where which phase is running matters more than the percentage, so the leading edge types the current phase and docks it into a timestamped ledger below the track; pick progress-hatch instead when the run is one undifferentiated quantity and a precise numeric read matters more than narration, or loader-thread-spool when the total is unknown at the start.
Install
npx shadcn add https://design.helpmarq.comns-ui / progress-narrated
hover the bar to pause
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | 0 | progress 0-100 (controlled); a decrease resets the ledger |
| phases? | ChroniclePhase[] | DEFAULT_PHASES | phases in ascending order of `at` |
| className? | string | — | — |
| aria-label? | string | "Progress" | — |