Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
progress-demo
"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%]" />
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/progress-demo.json"Installation
pnpm dlx shadcn@latest add progress
Usage
import { Progress } from "@/components/ui/progress"<Progress value={33} />