Progress

A high-quality, styled React progress bar component built with @base-ui/react for task progress indication.

The Progress component visualizes task completion status with support for animated indicators, custom labels, and percentage formatting.

Usage

import { Progress } from "@/components/ui/progress";

export function ExampleProgress() {
  return (
    <Progress.Root value={65}>
      <Progress.Label>Uploading Assets</Progress.Label>
      <Progress.Value />
      <Progress.Track>
        <Progress.Indicator />
      </Progress.Track>
    </Progress.Root>
  );
}

Preview

Exporting Data

Anatomy

import { Progress } from "@base-ui/react/progress";

<Progress.Root>
  <Progress.Label />
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
  <Progress.Value />
</Progress.Root>;

API Reference

Progress.Root Props

Prop	Type	Default	Description
`value`	`number \| null`	`null`	Current completion value. Set to `null` for indeterminate state.
`min`	`number`	`0`	Minimum progress value.
`max`	`number`	`100`	Maximum progress value.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Progress track height size.