Progress

Progress bars help users understand how much of a bounded task has been completed. In this system the bar stays minimal and structural: one line of status, one fill, and enough surrounding copy to make the percentage meaningful.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<div className="grid gap-3">
  <div className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
    <span>Release completion</span>
    <span>64%</span>
  </div>
  <Progress value={64} />
</div>

Why This Primitive Exists

The progress primitive gives long-running or staged work a consistent meter without adding ornamental motion or decorative status chrome.

• Use it when completion can be expressed as a bounded percentage.
• Pair it with a short label so the user knows what the bar measures.
• Do not use it as a vague loading indicator for unknown durations. Use a spinner or skeleton instead.

Examples

Single Meter

The simplest pattern is one labeled meter with a percentage or short status value nearby.

Multiple Stages

Comparing several bounded tasks works well when each bar has the same scale and a concise label.

{stages.map(([label, value]) => (
  <div key={label} className="grid gap-2">
    <div className="flex items-center justify-between gap-4">
      <span>{label}</span>
      <span>{value}%</span>
    </div>
    <Progress value={value} />
  </div>
))}

In Context

The bar becomes clearer when the surrounding copy names the workflow, the current state, and the remaining blocker.

Guidance

Measure A Real Process

• Use progress for imports, release checklists, uploads, or staged reviews with a known end.
• Keep the label explicit. Registry prep communicates more than Status.
• If the process is not truly quantifiable, use descriptive status copy instead of a false percentage.

Add Context Around The Meter

• Pair the bar with a short label and current value.
• Add supporting copy when the user also needs to know what remains.
• Use adjacent badges or notes for blockers rather than overloading the bar itself.

Keep The Geometry Consistent

• Use the default height for most surfaces.
• Avoid stacking too many decorative treatments around the bar.
• Let the fill indicate completion; let copy explain meaning.

API Reference

Progress

Progress wraps @radix-ui/react-progress and renders a bordered track with a translating indicator fill.

Progress also accepts the standard Radix progress props, including max, getValueLabel, and native div attributes applied to the root.