Progress

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/progress.json

Examples

With Value

With Label

Migrating from Radix UI

The Progress component is similar to Radix UI's Progress component, so you don't need to change anything to migrate.

However, there are some additional components you can use to enhance the progress bar.

ProgressLabel Component

The ProgressLabel component displays a descriptive label for the progress bar. When using labels, you'll need to compose the Progress component manually using ProgressTrack and ProgressIndicator. This gives you complete control over the layout and positioning of labels, tracks, and values.

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

<Progress value={50}>
  <ProgressLabel>Progress</ProgressLabel>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

ProgressValue Component

The ProgressValue component displays the current progress value in a readable format. When using values, you'll need to compose the Progress component manually using ProgressTrack and ProgressIndicator. This gives you complete control over the layout and positioning of labels, tracks, and values.

The ProgressValue component accepts a render function that provides access to both the formatted value (with percentage) and the raw progress value. This allows for custom formatting and display logic.

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

<Progress value={50}>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
  <ProgressValue>{(formattedValue, progress) => `${progress} lbs`}</ProgressValue>
</Progress>