Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

"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%]" />
}

Installation


pnpm dlx shadcn@latest add progress

Usage

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

<Progress value={33} />

Popover Radio Group

On This Page

Installation Usage

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Chick-fil-A, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.