Components
Loading preview...
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
npx shadcn@latest add https://21st.dev/r/shadcn/progress"use client"
import * as React from "react"
import { Progress } from "@/components/ui/progress"
export 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%]" />
}