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 "http://localhost:3000/registry/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).
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.