Progress
shadcn/ui
Horizontal bar showing a value from 0–100. Used for SLA countdowns, task completion, and loading indicators.
@/components/ui/progressSizes
Slim
h-1Inline row indicators, compact listsDefault
h-1.5Table SLA columnStandard
h-2Card metrics, detail panelsLarge
h-3Prominent KPI bars on dashboardsSLA states
Color the fill using status tokens to communicate urgency. Override the default bg-primary with a semantic token.
On track
85%
bg-status-done≥ 60%Caution
44%
bg-status-in-progress30–59%At risk
14%
bg-status-blocked< 30%Completed
100%
bg-status-done100%In-context — SLA column
| Partner | Status | SLA |
|---|---|---|
| Banana Corp | Open | 82% |
| Orange Ltd | In Progress | 61% |
| Grape Solutions | In Review | 44% |
| Lemon Labs | Blocked | 18% |
| Apple Industries | Done | 100% |
Props
| Prop | Type | Notes |
|---|---|---|
| value | number | 0–100. Values outside are clamped automatically. |
| className | string | Override h-4 for size. The inner indicator always fills bg-primary by default. |
To color the indicator, use a raw div with a status token class instead of the Progress component — the Radix indicator does not accept a color prop directly.
On this page