React Progress
Progress (linear) and CircularProgress for jobs, utilization, and quotas. Values read out in monospaced tabular digits; status variants map to the reserved severity tokens (utilization warnings in amber, failures in red — always alongside a label, never color alone). The linear bar has an indeterminate mode for unknown durations; both expose full role="progressbar" ARIA.
Synthesis12%
Place & route64%
Utilization (warning above 80%)87%
Timing closure100%
DRC — failed at 31%31%
Uploading deliverables
12%
73%
100%
Installation
npx shadcn@latest add progress.json
Usage
Loading...
Props
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
| value / max | number | 0 / 100 | Current value and maximum |
| variant | 'default' \ | 'success' \ | 'warning' \ |
| size | 'sm' \ | 'md' \ | 'lg' |
| showValue | boolean | false | Mono percentage readout |
| label | string | — | Label above the bar + accessible name |
| indeterminate | boolean | — | Sliding bar for unknown duration |
CircularProgress
Same value/variant/label props, plus size (px, default 56), strokeWidth (default 5), and showValue (default true).