Docs › Components › Progress

Shadcn Progress

The shadcn/ui Progress bar shows how far a determinate task has advanced, styled with Tailwind CSS v4. Built on accessible primitives, it exposes the value to assistive tech. Progress bars track uploads, downloads, and multi-step flows across ShadcnStore blocks.

Key features

• Determinate progress from 0 to 100 via the value prop.
• Exposes the value to assistive tech automatically.
• Animates smoothly as the value changes.
• Styles fully with Tailwind for height and color.

Installation

npx shadcn@latest add progress

Usage

"use client"
import { useEffect, useState } from "react"
import { Progress } from "@/components/ui/progress"

export function Example() {
  const [value, setValue] = useState(13)
  useEffect(() => {
    const t = setTimeout(() => setValue(66), 500)
    return () => clearTimeout(t)
  }, [])
  return <Progress value={value} />
}

With labels

Pair each bar with a caption and its percentage to show multi-step progress, such as an upload or onboarding flow.

<div className="grid gap-1.5">
  <div className="flex justify-between text-sm">
    <span>Uploading</span>
    <span className="text-muted-foreground">60%</span>
  </div>
  <Progress value={60} />
</div>

Props

Prop	Type	Default	Description
value	number	—	Current percentage from 0 to 100.
max	number	100	Value that represents complete.

Accessibility

• The bar reports its value to screen readers; keep value accurate as the task advances.
• For a task with no known percentage, use an indeterminate loader or a Skeleton instead.
• Pair the bar with a visible label or percentage for clarity.

When to use the Progress

Use a Progress bar when you know how complete a task is: a file upload, a checkout step, or an onboarding flow. For unknown-duration loading of content, use a Skeleton or a spinner. For selecting a value within a range, use a Slider.

Used in these blocks

• Widgets: usage and quota meters.
• Apps: upload and step progress.
• Checkout forms: multi-step progress.

Related components

A Progress bar reports task completion; for indeterminate loading use a Skeleton, and for choosing a value in a range use a Slider. It often sits in a Card with a Badge.

FAQ

What is the shadcn progress used for?

The Progress bar shows how far a determinate task has advanced, such as an upload, a multi-step form, or a download.

How do I set the progress value?

Pass a value prop from 0 to 100. Update it as the task advances to move the bar.

What is the difference between Progress and Skeleton?

Progress shows a known percentage of completion. Skeleton is an indeterminate placeholder for content that is still loading.

How do I show indeterminate progress?

The Progress component is determinate. For unknown duration, use a spinner or a Skeleton instead.