Progress

Uploading 24 files

Installation

pnpm dlx shadcn@latest add @paneui/progress

Usage

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

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

Examples

Tones

Use when a bar reports a storage or quota limit.

RTL

Motion

The fill eases to each new value over 300ms. With value={null} the bar is indeterminate: it slides across the track, and pulses in place under reduced motion.

API Reference

Built on the Progress primitive. Only the props this library adds or changes are listed; everything else passes through.

Also accepts every prop of Progress.Root.

value*: number | null; Current value; null is indeterminate.
size= "default": "sm" | "default" | "lg"; Track height (4 / 6 / 8px).
tone= "default": "default" | "success" | "warning" | "destructive"; Fill colour.
children: ReactNode; Label and value row above the track.

Prop	Type	Default	Description
value*	number \| null	—	Current value; `null` is indeterminate.
size	"sm" \| "default" \| "lg"	"default"	Track height (4 / 6 / 8px).
tone	"default" \| "success" \| "warning" \| "destructive"	"default"	Fill colour.
children	ReactNode	—	Label and value row above the track.

ProgressLabel

Also accepts every prop of Progress.Label.

ProgressValue

Formatted percentage by default. Also accepts every prop of Progress.Value.