Progress

Displays an indicator showing the completion progress of a task.

$bunx shadcn@latest add @nx-ui/progress
Registry item
Installs withutils
Used byai-contextonboarding-checklist

Basic usage

A bare progress bar, and one paired with a label and formatted value.

x
Compost turning — Bay 4
x

Track sizes

Override the track height with a className for a bolder or more subtle bar.

x
x
x

States

Indeterminate (value is null), complete, and an at-risk styling override for a stalled job.

Awaiting site survey data…
x
Digestate sampling
x
Odour abatement — Unit 2
x

Label positions

Pass a `labelPosition` for the UUI value-label variants: inline right, below, or a floating bubble that tracks the fill.

x
x
30%
x
80%
x

Live upload

Value driven by interval state, climbing until the batch finishes.

Uploading lab results…
x

Intake queue

Progress bars composed inside cards for a site's processing queue.

Fenwick Quarry
Contaminated soil batch FQ-2291
Complete
x
Alderbrook Depot
Green waste shredding run
In progress
x
Marsh End Facility
Leachate treatment cycle
Behind schedule
x

API reference

Exported parts and their props, extracted from the component source.