Progress

A linear progress bar built on Base UI that displays a labeled, accessible indicator of completion with optional label and numeric value display.

Default
Uploading file…
x
Storage used
x
Complete
x
Colors
Primary (default)
x
Success
x
Warning
x
Destructive
x
Muted
x
Controlled
Processing
x

Current value: 0

Indeterminate
Loading resources…
x
Syncing data
x

value={null} puts the bar in indeterminate state — useful when task duration is unknown.

Sizes
Extra small
x
Small (default)
x
Medium
x
Large
x
Extra large
x
With Format
Default (percent)
x
Data transferred
x
Accuracy
x
Onboarding steps
x

Installation

npx shadcn@latest add @byronwade/progress

Props

PropTypeDefaultDescription
valuenumber | null—The current progress value (typically 0–100). Pass null for indeterminate state.
classNamestring—Additional CSS class names applied to the root wrapper element.
childrenReact.ReactNode—Optional children rendered inside the root before the built-in track (e.g. ProgressLabel, ProgressValue).