Progress

How much of a task is done, as a bar.

Animated

Indexing notes…

const [value, setValue] = useState(13);

useEffect(() => {
  const timer = setTimeout(() => setValue(66), 500);
  return () => clearTimeout(timer);
}, []);

<Progress value={value} />

Complete

Synced

Sizes & values

Custom max — 30 of 40 (75%)

Widths

Heights

{/* Custom max — 30 of 40 = 75% */}
<Progress value={30} max={40} />

{/* Widths */}
<Progress value={60} className="w-24" />
<Progress value={60} className="w-56" />

{/* Heights */}
<Progress value={50} className="h-1" />
<Progress value={50} className="h-4" />

Colors & stops

Themed — success, warning, error. Dynamic colors bind the indicator hue to the value (e.g. error → warning → success as it climbs).

With Stops — checkpoints along the track

{/* Themed — recolor the indicator via the data-slot child */}
<Progress
  value={70}
  className="bg-success/20 [&_[data-slot=progress-indicator]]:bg-success"
/>

{/* With Stops — absolute ticks over the track */}
<div class="relative">
  <Progress value={40} />
  <span class="absolute top-0 left-[20%] h-2 w-px bg-bg-base" />
</div>

Markdown for agents: /design/progress.md · spec: /design.md