Command Palette

Search for a command to run...

Progress

Displays an indicator showing the completion progress of a task.

A progress bar component built on top of Radix UI Progress.

Installation

npx shadcn@latest add progress

Usage

import { Progress } from "@/components/ui/progress"
<Progress value={33} />

Examples

With Value

"use client"
import * as React from "react"
import { Progress } from "@/components/ui/progress"
export default function ProgressDemo() {
const [progress, setProgress] = React.useState(13)
React.useEffect(() => {
  const timer = setTimeout(() => setProgress(66), 500)
  return () => clearTimeout(timer)
}, [])
return <Progress value={progress} className="w-[60%]" />
}

Props

Progress

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | value | number | undefined | The progress value. | | max | number | 100 | The maximum progress value. |