Progress

A bar that visualizes the completion status of an operation.

API Reference

Preview

Installation

Usage

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
<Progress value={40} />

Note: When no children are provided, a default track and indicator are rendered for you. If you render children inside Progress (e.g. ProgressLabel, ProgressValue), the track and indicator are still included automatically.

API Reference

Progress

Root component. Styled wrapper for Progress.Root from Base UI. Automatically renders a track and indicator.

ProgressTrack

Track container for the progress indicator. Styled wrapper for Progress.Track from Base UI.

ProgressIndicator

Visual indicator showing the current progress. Styled wrapper for Progress.Indicator from Base UI.

ProgressLabel

Label text for the progress bar. Styled wrapper for Progress.Label from Base UI.

ProgressValue

Displays the current value. Styled wrapper for Progress.Value from Base UI.

Examples

With Label and Value

With Formatted Value