Progress Bar
Loaders
Source and install need .
pnpm dlx shadcn@latest add @assembli/storage-meterStorage Meter
A storage breakdown like cloud drives and OS settings have: one rounded bar split into colored segments, a summary that turns amber then red as space runs out, and a legend with each category's icon and size plus what's left. Point at a segment or row and the rest dim while a bubble shows its share. Sweeps in on load, has a compact sidebar variant, and reads out as a Base UI Meter.
- Dependencies
- @base-ui/react(npm, opens in a new tab)
Props
Other props pass through to the root element.
segments*
StorageSegment[]
total*
number
Capacity in bytes.
title
React.ReactNode
Default
"Storage"action
React.ReactNode
A button or link in the header, such as Manage or Upgrade.
variant
"default" | "compact"
Default
"default"defaultshows a legend with sizes;compactis a slim bar and one line, for sidebars.warning
number
Default
0.8Share of capacity (0–1) where the summary turns amber. Red starts at
danger.danger
number
Default
0.95
| Prop | Type | Default | Description |
|---|---|---|---|
| segments* | StorageSegment[] | – | |
| total* | number | – | Capacity in bytes. |
| title | React.ReactNode | "Storage" | |
| action | React.ReactNode | – | A button or link in the header, such as Manage or Upgrade. |
| variant | "default" | "compact" | "default" | default shows a legend with sizes; compact is a slim bar and one line, for sidebars. |
| warning | number | 0.8 | Share of capacity (0–1) where the summary turns amber. Red starts at danger. |
| danger | number | 0.95 |
