Components

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Playground

Value—value

Label—FieldLabel

Animate—transition-all

Usage

Import Progress from the design system and pass value as a number from 0 to 100 — the primary indicator fills the muted track proportionally.

import { Progress } from "@workspace/ui/components/progress"

<Progress value={33} />

Update value as the task advances — the indicator carries transition-all, so each change animates smoothly instead of jumping. This bar moves from 13 to 66 half a second after mounting.

const [progress, setProgress] = React.useState(13)

React.useEffect(() => {
  const timer = setTimeout(() => setProgress(66), 500)
  return () => clearTimeout(timer)
}, [])

<Progress value={progress} />

With label

Pair the bar with a Field — FieldLabel lays out as a flex row, so an ms-auto span docks the percentage to the far edge. Link them with htmlFor / id for accessibility.

import { Field, FieldLabel } from "@workspace/ui/components/field"

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="progress-upload">
    <span>Upload progress</span>
    <span className="ms-auto">66%</span>
  </FieldLabel>
  <Progress value={66} id="progress-upload" />
</Field>

Controlled

Progress is display-only — it renders whatever value it receives, so any state can drive it. Here a Slider controls the bar directly.

const [value, setValue] = React.useState([50])

<Progress value={value[0]} />
<Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />

API Reference

Progress wraps the Radix Progress primitive and accepts all of its props. The root exposes data-state (loading | complete | indeterminate), data-value and data-max for styling. The styled indicator maps value straight to a 0–100% fill, so keep max at its default of 100.

Prop	Type	Default
value	number \| null	—
max	number	100
getValueLabel	(value: number, max: number) => string	—
className	string	—

Tokens used

3 design tokens consumed by the Progress component.

--muted
Muted
bg-muted
--primary
Primary
bg-primary
--spacing
Spacing unit (4px)
h-1.5size-full