Components

Progress

A determinate progress bar — a token-styled wrapper over Base UI's Progress. Base UI sizes the indicator from value/max; this owns the surface (sharp corners, muted track) and an optional label/value row.

Install

npx shadcn@latest add @alix/progress

Preview

Uploading

Usage

<Progress value={72} label="Uploading" showValue />
<Progress value={3} max={5} size="sm" color="var(--success)" />

Examples

Track thickness

Use the small track in dense rows and the default track when the progress line carries its own label.

Diligence requests

<Progress value={46} size="sm" label="Diligence requests" />
<Progress value={46} label="Diligence requests" showValue />

Status colours

Drive the indicator colour from the same semantic tokens used by operational health elsewhere.

On-track workstreams

At-risk actions

Off-track actions

<Progress value={82} label="On-track workstreams" showValue color="var(--success)" />
<Progress value={38} label="At-risk actions" showValue color="var(--warning)" />
<Progress value={16} label="Off-track actions" showValue color="var(--destructive)" />

Milestone max value

Set max when completion is counted in workstream milestones rather than a raw percentage.

Steering pack milestones

<Progress value={3} max={4} label="Steering pack milestones" showValue />

Readiness panel

Panel, Badge, Separator, and Progress form a compact delivery-readiness summary.

Integration readiness

Day-one workstreams

Attention

People plan

Systems access

Supplier notices

Senior sponsor review is due before the Friday steering call.

<Panel
  title="Integration readiness"
  description="Day-one workstreams"
  actions={<Badge variant="warning" dot>Attention</Badge>}
>
  <div className="flex flex-col gap-4">
    <Progress value={88} label="People plan" showValue />
    <Progress value={64} label="Systems access" showValue color="var(--warning)" />
    <Progress
      value={42}
      label="Supplier notices"
      showValue
      color="var(--destructive)"
    />
    <Separator />
    <p className="text-xs text-muted-foreground">
      Senior sponsor review is due before the Friday steering call.
    </p>
  </div>
</Panel>

When to use it

Use it for

Determinate process completion, such as workstream readiness, upload progress, or checklist coverage.
Dashboard panels where a percentage needs a quiet visual companion rather than a headline KPI.
Series-coloured completion bars that align with chart or status tokens.

Reach for something else

Values the user can drag or adjust — use Slider instead.
Discrete state labels such as on track, at risk, or draft — use Badge instead.
Headline metrics with trend context — use StatCard instead.
Unknown-duration loading feedback — use Button loading or Toast instead.

Props

Prop	Type	Default	Description
value	number	—	Current progress, 0–max.
max	number	100	The full value.
label	ReactNode	—	Optional caption above the track — a node so it can carry an icon.
showValue	boolean	false	Show the formatted percentage (e.g. "72%") to the right of the label.
color	string	var(--primary)	CSS colour for the filled indicator — an inline style, so a chart/series colour can drive it per instance.
size	"sm" \| "md"	"md"	Track thickness.