Progress Bar

Component progress-bar-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add progress-bar

Usage

import * as ProgressBar from "@/registry/react-aria/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.

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.

<div className="space-y-4">
  <ProgressBar.Root value={3} maxValue={5} />
  <ProgressBar.Root value={7} maxValue={10} />
  <ProgressBar.Root value={15} maxValue={20} />
</div>