Progress Bar

PreviousNext

A simple progress bar component that shows the completion status of a task.

Component progress-bar-demo not found in registry.

Installation

pnpm dlx shadcn@latest add progress-bar

Usage

import * as ProgressBar from "@/registry/radix-ui/ui/progress-bar"
 
export default function ProgressBarExample() {
  return <ProgressBar.Root value={75} color="primary" />
}

Features

  • Simple design: Clean, minimal progress bar with smooth transitions
  • Color variants: Primary, secondary, danger, success, and warning
  • Flexible values: Support for custom min/max values
  • Accessibility: Built-in ARIA attributes for screen readers
  • Lightweight: Single component with no unnecessary complexity

Examples

Basic Progress Bar

A standard progress bar with default styling.

<ProgressBar.Root value={50} />

With Color Variants

Use different colors for various contexts.

Component progress-bar-colors not found in registry.

<div className="space-y-4">
  <ProgressBar.Root value={75} color="primary" />
  <ProgressBar.Root value={60} color="success" />
  <ProgressBar.Root value={45} color="warning" />
  <ProgressBar.Root value={30} color="danger" />
</div>

Different Progress Values

Show various completion states.

Component progress-bar-values not found in registry.

<div className="space-y-4">
  <ProgressBar.Root value={25} />
  <ProgressBar.Root value={50} />
  <ProgressBar.Root value={75} />
  <ProgressBar.Root value={100} />
</div>

Rounded Variants

Show rounded and square progress bars.

Component progress-bar-rounded not found in registry.

Custom Max Values

Use custom ranges for your progress bars.

Component progress-bar-custom-max not found in registry.

Accessibility

The progress bar component includes proper ARIA attributes:

  • role="progressbar" - Identifies the element as a progress bar
  • aria-valuenow - Current value of the progress bar
  • aria-valuemin - Minimum value (always 0)
  • aria-valuemax - Maximum value (defaults to 100)

Examples

File Upload Progress

import { Upload } from "lucide-react"
 
export function FileUploadProgress() {
  const [progress, setProgress] = useState(0)
 
  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <Upload className="size-4" />
        <span className="text-sm font-medium">Uploading file...</span>
      </div>
      <ProgressBar.Root value={progress} color="primary" />
      <span className="text-muted-foreground text-sm">
        {progress}% complete
      </span>
    </div>
  )
}

Task Completion

export function TaskProgress() {
  const [completed, setCompleted] = useState(3)
  const total = 5
 
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span>Task Progress</span>
        <span>
          {completed}/{total} completed
        </span>
      </div>
      <ProgressBar.Root value={completed} max={total} color="success" />
    </div>
  )
}

Form Validation Progress

export function FormValidationProgress({ errors, totalFields }) {
  const validFields = totalFields - errors.length
  const progress = (validFields / totalFields) * 100
 
  return (
    <div className="space-y-2">
      <ProgressBar.Root
        value={progress}
        color={progress === 100 ? "success" : "warning"}
      />
      <span className="text-muted-foreground text-sm">
        {validFields} of {totalFields} fields valid
      </span>
    </div>
  )
}