Skip to content
Wave 2

Progress

Progress of a task with a known or unknown amount of work.

  • Placeholder while loading a page section: use Skeleton.

Install

Terminal
pnpm dlx shadcn@latest add @acme/progress

Or import from the package: import { Progress } from '@acme/react'

Examples

Basic

Uploading statements.pdf
x
Preparing export
x
progress-basic.tsx
import { Progress } from '@/components/ui/progress'

export default function ProgressBasic() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Progress label="Uploading statements.pdf" value={64} />
      <Progress label="Preparing export" value={null} showValue={false} />
    </div>
  )
}

Props

Progress props
PropTypeDefaultDescription
label (required)ReactNode—Visible label; names the progressbar.
value (required)number | null—0–100, or null when indeterminate.
showValuebooleantrueShow the formatted value.

Accessibility

Role
progressbar
You provide
  • label (enforced by TypeScript).
Built in
  • The track has a 3:1 outline so the bar extent is visible (WCAG 1.4.11).
WCAG 2.2 criteria
1.4.11, 4.1.2

Don’t

  • Use for steps in a form.

Tokens

  • color.primary
  • color.muted
  • color.input