Progress

A progress bar for displaying task completion or upload status.

Installation

pnpm dlx stera-ui add progress

Usage

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
<Progress value={33} className="w-80" />

With Label and Value

Use ProgressLabel and ProgressValue as children of Progress to display a description and a numeric percentage.

Uploading...
<Progress value={66} className="w-80">
  <ProgressLabel>Uploading...</ProgressLabel>
  <ProgressValue />
</Progress>

API Reference

Progress

Built on Base UI's Progress.Root. Automatically renders the track and indicator internally.

PropTypeDefault
valuenumber | null—

ProgressLabel

Renders a descriptive label aligned to the start. Accepts all Base UI Progress.Label props.

ProgressValue

Renders the current percentage value aligned to the end. Accepts all Base UI Progress.Value props.

ProgressTrack

The outer bar container. Accepts all Base UI Progress.Track props.

ProgressIndicator

The inner filled bar. Accepts all Base UI Progress.Indicator props.