Shadcn Progress Components

Shadcn Progress Component

The Shadcn Progress is a horizontal bar that shows how much of a task is complete. Uploads, onboarding steps, storage quotas and project milestones all use it, because a filling bar tells users at a glance how far along they are and how much is left.

Stacked CPU, memory and disk bars, a setup checklist that computes its value from completed steps and an upload button that fills the bar in stages show the range of this React progress bar component. It is built with shadcn/ui and Tailwind CSS on the Progress primitive from Radix UI, which renders the track with the progressbar role.

What is the Shadcn Progress Component?

A progress bar has two layers: a muted track that spans the full width, and an indicator inside it that slides in from the left based on the value prop, a number from 0 to 100. The shadcn/ui version moves the indicator with a CSS transform and a transition, so the bar animates smoothly whenever the value changes.

Use a progress bar when you know how much of a task is complete. When the duration is unknown, show a Spinner instead, and while page content is loading, a Skeleton gives a better preview of the layout. If users should set the value themselves, use a Slider.

Anatomy of the Shadcn Progress

10 Shadcn Progress Variants

Each progress variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic animated: A bar that animates from 13% to 66% after mount, showing the built-in transition.
• Custom colors and height: Yellow and green bars with a tinted track, and a thicker bar using a height class.
• With label and percentage: An Upload Progress label above the bar with the value on the right, or the percentage next to the bar.
• Multiple metrics: CPU, memory and disk usage bars stacked with their own labels, like a system monitor.
• Step progress: A setup checklist where the bar is calculated from completed steps and each step shows a check mark.
• Card with milestones: A Project Status card with design, development and testing phases.
• Status and interactive upload: Storage usage with a Low, Medium or High badge, and a Start Upload button that fills the bar in steps.

How to Install the Shadcn Progress Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a progress variant by its name:

npx shadcn@latest add @shadcnuikit/progress1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Progress Component

Import Progress from components/ui/progress and pass a number between 0 and 100 to value. Update the value from state to animate the bar, and mirror it in aria-valuenow so screen readers hear the current value.

"use client"

import * as React from "react"

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

export function UploadProgress() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="w-full max-w-sm space-y-2">
      <div className="flex justify-between text-sm">
        <span>Uploading report.pdf</span>
        <span className="text-muted-foreground">{progress}%</span>
      </div>
      <Progress
        value={progress}
        aria-valuenow={progress}
        aria-label="Upload progress"
      />
    </div>
  )
}

Why Use the Shadcn Progress Component

• Instant feedback: Users see that a task is running and how much is left, which reduces uncertainty and abandoned actions.
• Accessible foundation: Radix UI renders role="progressbar" with aria-valuemin and aria-valuemax, and you add a label and the current value.
• Smooth animation: The indicator moves with a transform and a CSS transition, which is cheap for the browser to animate.
• One prop API: Pass a value and you are done; everything else is regular Tailwind CSS classes.
• Theme aware: The track uses bg-muted and the indicator bg-primary, so the bar follows your palette and dark mode.

Common Progress Use Cases

• File uploads: Show upload or download progress with the percentage next to the file name.
• Onboarding and setup: Track how many steps of a signup or profile setup are complete.
• Usage and quotas: Storage, bandwidth or plan limits in billing and account pages.
• Project tracking: Milestones and phase completion in dashboards and project cards.
• System monitoring: CPU, memory and disk usage in admin panels.
• Courses and goals: Lesson completion, reading progress or fundraising goals.

Customizing the Shadcn Progress

Change the height with a class such as h-3, the track color with a background class on Progress, and the indicator color with [&>div]:bg-green-500. To keep colors consistent across themes, prefer theme tokens like bg-primary/20 and bg-primary, or generate a palette with the free Theme Generator.

For status colors, pick the indicator class from the value with cn():

<Progress
  value={usage}
  className={cn(
    "h-2.5",
    usage >= 80 && "[&>div]:bg-destructive"
  )}
/>

Progress Accessibility

The Radix UI primitive renders the bar with role="progressbar" with aria-valuemin and aria-valuemax. The shadcn/ui Progress uses value only to position the indicator and does not forward it to the Radix root, so the root has no aria-valuenow and its data-state stays indeterminate. Pass aria-valuenow yourself, or forward value to ProgressPrimitive.Root in your copy of the component. Give every bar an accessible name, either with aria-label or with a visible label linked through aria-labelledby.

The bar is not interactive, so it has no keyboard behavior. Show the percentage as text next to it, because color and width alone are not enough for every user, and do not rely only on red, yellow and green to communicate a status.

Progress Best Practices

• Always pair the bar with a label that says what is progressing.
• Show the percentage or a count such as 2/4 when the exact number matters.
• Use a Spinner when you cannot measure progress, instead of a bar that jumps or stalls.
• Update the value in reasonable steps; very frequent updates add re-renders without visible benefit.
• Keep the track visible so users can see the remaining part of the task.
• Combine the bar with a status badge or text for usage limits, not color alone.

Components Related to Progress

Shadcn Progress FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.