Progress

Installation

npx baseui-cn add progress

Usage

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

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

Examples

Basic

A simple progress bar.

With label and value

Show label and percentage.

Indeterminate

Omit value for an indeterminate state.

Determinate progress uses Base UI values and a width transition. Indeterminate progress remains labelled through Base UI; reduced motion renders its indicator without movement.

For manual installation, copy the stylesheet included with the component source and retain its import. CLI installation includes it automatically; website CSS is not required.