SegmentProgressBar
proSegmentProgressBar fills a row of equal-width segments to visualise progress, capacity, or completion level at a glance.
In stock65%
Installation
Add this component with the NateUI CLI.
Examples
Segment Count
Color
Healthy stock78%
In progress55%
Running low28%
Critical12%
Size
In stock70%
Question3/5
API
| Prop | Description | Type | Default |
|---|---|---|---|
segments | Total number of equal-width bars in the row. | number | — |
percent | Fill level, 0–100. The filled count is Math.round((percent / 100) * segments). | number | — |
filledClass | Tailwind background class applied to filled segments. | string | 'bg-success' |
className | Additional class applied to every segment (filled and empty alike). | string | — |
gap | Pixel space between segments (inline style). | number | 4 |
height | Pixel height of each segment (inline style). | number | 16 |