Progress

A linear progress indicator.

Installation

bash
npx shadcn@latest add progress

Import

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

Static

<Progress value={66} className="w-[60%]" />

Animated

export function ProgressDemo() {  const [progress, setProgress] = React.useState(0)  React.useEffect(() => {    const timer = setInterval(() => {      setProgress((prev) => (prev >= 100 ? 0 : prev + 10))    }, 500)    return () => clearInterval(timer)  }, [])  return <Progress value={progress} className="w-[60%]" />}

Props

PROPTYPEDEFAULTDESCRIPTION
valuenumber0Progress value (0–100)
maxnumber100Maximum value