Progress

A progress bar built on Base UI's Progress primitive. The root component automatically renders a track and indicator, and you can optionally add a label and formatted value display.

import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"

export default function ProgressDemo() {
  return (
    <Progress value={60}>
      <ProgressLabel>Loading</ProgressLabel>
      <ProgressValue />
    </Progress>
  )
}

Anatomy

import {
  Progress,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

<Progress value={50}>
  <ProgressLabel>Loading...</ProgressLabel>
  <ProgressValue />
</Progress>

The Progress root automatically includes a ProgressTrack with a ProgressIndicator inside it. You only need to add ProgressLabel and ProgressValue if you want text above the bar.

Examples

Basic progress bar

<Progress value={60} />

With label and value

<Progress value={45}>
  <ProgressLabel>Uploading</ProgressLabel>
  <ProgressValue />
</Progress>

Indeterminate state

Pass value={null} to indicate an indeterminate progress state.

<Progress value={null}>
  <ProgressLabel>Processing...</ProgressLabel>
</Progress>

Complete

<Progress value={100}>
  <ProgressLabel>Complete</ProgressLabel>
  <ProgressValue />
</Progress>

API Reference

Progress

The root component. Wraps everything in a Base UI Progress.Root and automatically renders a ProgressTrack containing a ProgressIndicator.

ProgressTrack

The background track that contains the indicator. Rendered as a rounded bar with muted background.

ProgressIndicator

The filled portion of the track. Width is automatically controlled by the progress value.

ProgressLabel

A text label rendered with text-sm font-medium.

ProgressValue

Displays the formatted progress value, right-aligned with tabular number styling and muted foreground color.