Fumadocs on TanStack Start

Overview

The Progress component provides a visual indicator for showing task completion progress. It supports customizable sizes, labels, numeric value display, and smooth animations for progress updates.

Import

import { Progress } from "@px-ui/core";

Usage

<Progress.Root value={65} className="w-full max-w-md">
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Examples

With Label and Value

Combine labels and values to provide clear context about the progress.

Uploading files...

<Progress.Root value={45} className="w-full max-w-md">
  <div className="mb-2 flex items-center justify-between">
    <Progress.Label>Uploading files...</Progress.Label>
    <Progress.Value />
  </div>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Sizes

The Progress.Track component supports three size variants for different contexts.

Small

Default

Large

<Progress.Track size="sm">
  <Progress.Indicator />
</Progress.Track>

<Progress.Track size="default">
  <Progress.Indicator />
</Progress.Track>

<Progress.Track size="lg">
  <Progress.Indicator />
</Progress.Track>

Different States

Show progress at different completion stages.

Starting...

In progress

Complete!

{/* Starting */}
<Progress.Root value={0}>
  <div className="mb-2 flex items-center justify-between">
    <Progress.Label>Starting...</Progress.Label>
    <Progress.Value />
  </div>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

{/* In progress */}
<Progress.Root value={50}>
  <div className="mb-2 flex items-center justify-between">
    <Progress.Label>In progress</Progress.Label>
    <Progress.Value />
  </div>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

{/* Complete */}
<Progress.Root value={100}>
  <div className="mb-2 flex items-center justify-between">
    <Progress.Label>Complete!</Progress.Label>
    <Progress.Value />
  </div>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Anatomy

Components that make up Progress:

Progress.Root

The root container component that manages progress state.

Inherited Props: Inherits all props from Base UI Progress.Root including value, min, max, etc.

Progress.Track

The background track that contains the progress indicator.

Custom Props:

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Height of the progress track
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Progress.Track.

Progress.Indicator

The animated fill that shows the current progress.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Progress.Indicator.

Progress.Label

Text label describing the progress task.

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Progress.Label.

Progress.Value

Displays the numeric progress value (percentage).

Custom Props:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Inherited Props: Inherits all props from Base UI Progress.Value.

API Reference

See the Anatomy section above for detailed prop information for each component.

Progress

On this page