Skip to main content

​
Installation

npx shadcn@latest add progress

​
Usage

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

<Progress value={33} />

​
Component API

​
Progress

Progress indicator component built on Radix UI Progress. 
function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>)
Props:
  • value - Current progress value (0-100)
  • max - Maximum value (default: 100)
  • All standard Radix UI Progress props

​
Implementation

The component uses Radix UI’s Progress primitive with custom styling: 
<ProgressPrimitive.Root
  className="relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
  {...props}
>
  <ProgressPrimitive.Indicator
    className="h-full w-full flex-1 bg-primary transition-all"
    style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
  />
</ProgressPrimitive.Root>

​
Examples

​
Basic Progress

A simple progress bar: 
<Progress value={60} />

​
With Label

Progress bar with a label showing the percentage: 
<div className="space-y-2">
  <div className="flex items-center justify-between">
    <span className="text-sm font-medium">Progress</span>
    <span className="text-sm text-muted-foreground">60%</span>
  </div>
  <Progress value={60} />
</div>

​
Controlled Progress

Progress bar controlled by state: 
function ControlledProgress() {
  const [progress, setProgress] = React.useState(0)

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

  return <Progress value={progress} />
}

​
Different Sizes

Customize the height with className: 
<div className="space-y-4">
  <Progress value={60} className="h-1" />
  <Progress value={60} className="h-2" />
  <Progress value={60} className="h-4" />
</div>

​
Loading State

Indeterminate progress for loading states: 
<Progress value={null} className="animate-pulse" />

​
Accessibility

The Progress component:
  • Uses semantic role="progressbar" attributes
  • Includes aria-valuenow, aria-valuemin, and aria-valuemax for screen readers
  • Provides visual and programmatic progress indication

​
API Reference

See the Radix UI Progress documentation for complete API reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us