Progress

Determinate progress bar over a bg-secondary track. Use for goal completion, budget usage, multi-step flows. For indeterminate 'loading' states reach for Skeleton instead — Progress is not a spinner.

Examples

Default

<Progress value={37} />

Variants

Use semantic tints to signal state without writing CSS.

<Progress value={92} variant="success" />
<Progress value={75} variant="warning" />
<Progress value={88} variant="destructive" />

Custom max

Track arbitrary scales — e.g. 12/30 messages used.

12 / 30 used

<Progress value={12} max={30} />

Goal completion

Pair Progress with a label and value for a complete UI pattern.

Q4 revenue targetR$ 840k / 1.2M

<div className="space-y-1.5">
  <div className="flex justify-between text-sm">
    <span>Q4 revenue target</span>
    <span className="text-muted-foreground tabular-nums">R$ 840k / 1.2M</span>
  </div>
  <Progress value={70} />
</div>

API Reference

Props of the Progress component.

Prop	Type	Default	Description
`value`	`number`	`0`	Current value (0–max).
`max`	`number`	`100`	Max value. With the default, `value` is a percentage.
`variant`	`'default' \| 'success' \| 'warning' \| 'destructive'`	`'default'`	Tint of the filled portion.
`indicatorClassName`	`string`	—	Class on the inner fill — wins over `variant`.
`className`	`string`	—	Class on the outer track.