Progress

Shows how far along a task is.

<Progress aria-label="Upload" value={66} />

Installation

$ npx shadcn@latest add @constella/progress

Usage

import { Progress } from "@/components/primitives/progress";

<Progress aria-label="Upload" value={33} />

Composition

Progress├── ProgressLabel├── ProgressValue└── ProgressTrack    └── ProgressIndicator

Progress Label

Put a ProgressLabel and ProgressValue in Progress to name it and show its value above the track.

Upload progress

<Progress value={56}>  <ProgressLabel>Upload progress</ProgressLabel>  <ProgressValue /></Progress>

Progress Value

Give ProgressValue a function to show the value your way, like a file's size. Set max to count in its own units. The fill travels to each new value.

brand-guidelines.pdf

q3-report.xlsx

launch-video.mp4

<Progress max={file.size} value={sent}>  <ProgressLabel>{file.name}</ProgressLabel>  <ProgressValue>    {() => (sent >= file.size ? "Done" : `${mb(sent)} of ${mb(file.size)}`)}  </ProgressValue></Progress>

Indeterminate

Pass value={null} while the amount isn't known yet. A segment sweeps across the track; under reduced motion it breathes in place.

Preparing exportCounting files…

<Progress value={null}>  <ProgressLabel>Preparing export</ProgressLabel></Progress>

API Reference

Part	Adds
`Progress`	Renders `ProgressTrack` and `ProgressIndicator` after its children

Every part takes sx, applied last. For the rest, see Base UI Progress.