Progress

Visual indicators for displaying progress.

Basic Progress

Value: 40%

Progress Variants

Default
Success
Warning
Error

Progress Sizes

Small
Medium (Default)
Large

With Value Display

40%

Animated Progress

Usage

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

export default function MyComponent() {
  return (
    <div className="space-y-4">
      <Progress value={40} />
      <Progress value={75} variant="success" showValue />
      <Progress value={30} size="lg" variant="warning" animated />
    </div>
  )
}

Props

Name
Type
Default
Description
value
number
required
Current progress value.
max
number
100
Maximum value for the progress bar.
size
string
"md"
Size of the progress bar: "sm", "md", or "lg".
variant
string
"default"
Variant style: "default", "success", "warning", or "error".
showValue
boolean
false
Whether to display the current value as a percentage.
animated
boolean
false
Whether to apply a pulse animation to the progress bar.