Progress Bar

A progress bar shows the progression of a task.

() => clearTimeout(timer)

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/progress-bar

Use progress bars to show the progression of a system operation or task.

import { ProgressBar, ProgressBarControl } from "@/components/ui/progress-bar";

<ProgressBar value={60}>
	<ProgressBarControl />
</ProgressBar>

Use the controls below to experiment with different progress bar props and see the live preview and code update.

label

value

isIndeterminate

<ProgressBar value={60}>
  <Label>Loading...</Label>
  <ProgressBarTrack />
</ProgressBar>

primary

success

accent

danger

warning

Loading75%

Feeding…30 of 100 dogs

Sending…¥60

Progress bars show either determinate or indeterminate progress of an operation over time.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", ProgressBarRenderProps>`	`—`
	`number`	`0`
	`ReactNode`	`—`

	`NumberFormatOptions`	`{style: 'percent'}`

The visual track for the progress bar.

Supports all div attributes.

Missing description.

Supports all span attributes.

Last updated on 5/22/2026