Progress

Displays an indicator showing the completion progress of a task.

Upload

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/progress.json

Usage

Use for loading state and task completion. Pair with ProgressLabel and ProgressValue for labeled bars. The track and indicator are rendered by default.

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

export function Example() {
  return (
    <Progress value={60}>
      <ProgressLabel>Upload</ProgressLabel>
      <ProgressValue />
    </Progress>
  );
}

Pass value as a number from 0–100. Omit or use null for an indeterminate presentation when supported by Base UI.