Storage Meter
Loaders
Source and install need .
pnpm dlx shadcn@latest add @assembli/progress-barProgress Bar
The everyday progress bar on Base UI: a label with a right-aligned value that counts with the fill, an indeterminate sweep, a buffered layer, segments, three heights and four intents. Also exports StepProgress for "3 of 5 steps", UsageBar, a stacked storage meter with a legend, and ProgressCircle, a small ring for inline use.
Props
Other props pass through to the root element.
value*
number | null
The current value.
nullshows the indeterminate state.max
number
Default
100label
React.ReactNode
hint
React.ReactNode
A quiet line under the bar, such as "3 of 12 files · about 2 min left".
formatValue
((value: number, max: number) => React.ReactNode) | null
Default
(v, m) => `${Math.round(pctOf(v, m))}%`Formats the right-aligned value. Return
nullto hide it. Defaults to a whole percent.buffer
number
A lighter layer ahead of the fill, such as how much of a video has buffered.
segments
number
Splits the track into this many equal segments; the fill still runs continuously through them.
size
Size
Default
"sm"intent
Intent
Default
"default"
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | null | – | The current value. null shows the indeterminate state. |
| max | number | 100 | |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | A quiet line under the bar, such as "3 of 12 files · about 2 min left". |
| formatValue | ((value: number, max: number) => React.ReactNode) | null | (v, m) => `${Math.round(pctOf(v, m))}%` | Formats the right-aligned value. Return null to hide it. Defaults to a whole percent. |
| buffer | number | – | A lighter layer ahead of the fill, such as how much of a video has buffered. |
| segments | number | – | Splits the track into this many equal segments; the fill still runs continuously through them. |
| size | Size | "sm" | |
| intent | Intent | "default" |
