Progress

Feedback

Indicates the completion status of a task or process.

npx shadcn@latest add progress

Default

Preview

Live

tsx

1<Progress value={25} />
2<Progress value={66} />
3<Progress value={100} />

Animated

Feed it a changing value for live progress, like an upload.

Preview

Live

tsx

1const [value, setValue] = useState(0)
2
3useEffect(() => {
4  const id = setInterval(() => {
5    setValue((v) => (v >= 100 ? 0 : v + 5))
6  }, 300)
7  return () => clearInterval(id)
8}, [])
9
10<Progress value={value} />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	number= 0	The current progress, from 0 to 100.
getValueLabel	(value: number) => string	Returns an accessible label for the current value.