Progress

Displays an indicator showing the completion progress of a task. Built on Base UI Progress primitives.

Loading...

Usage

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

<ProgressRoot value={50}>
  <div className="flex justify-between mb-2">
    <ProgressLabel>Progress</ProgressLabel>
    <ProgressValue />
  </div>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</ProgressRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react

Examples

Different Values

25%

50%

75%

Complete!

Indeterminate

API Reference

valuenumber | null

Current progress value (0-100). null for indeterminate.

minnumber

=0

Minimum value.

maxnumber

=100

Maximum value.

getValueLabel(value: number, max: number) => string

Function to get accessible value label.