ns-ui
Engineering-drawing progress meter: a light hatch track and a dense shade-ramp fill with a dithered leading edge, an inline right-aligned numeric readout, and a box-drawing ruler of ticks below.
Use when a progress meter drawn as a blueprint-style hatch ruler — a dithered ░▒▓█ leading edge instead of a flat fill boundary, a numeric readout printed into the same character grid rather than overlaid, and a labelled box-drawing tick ruler underneath. Pick progress-narrated instead for a bar that narrates named phases, or loader-braille for per-dot rather than per-character resolution.
Install
npx shadcn add https://design.helpmarq.comns-ui / progress-hatch
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | progress, 0-100 (controlled). |
| totalChars? | number | — | bar width in characters. |
| marks? | number[] | — | percentages to tick and label below the bar. |
| aria-label? | string | — | accessible label for the meter. |
| className? | string | — | — |