Components / Progress

Progress

<Progress />Stable

Determinate progress bar. Use when you know the percentage complete — for indeterminate work, use Spinner. Track is muted; indicator is primary.

import { Progress } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

import { Progress } from "@/components/upnext";


<Progress />

Values

<Progress value={0} className="w-72" />

Composition

Onboarding3 of 5
<div className="flex flex-col gap-2">
  <div className="flex items-baseline justify-between text-sm">
    <span className="font-medium">Onboarding</span>
    <span className="tabular-nums text-body">3 of 5</span>
  </div>
  <Progress value={60} />
</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.