Embossed UI

Search documentation

Search for a page or component.

Progress

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

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

export function ProgressDemo() {
  return <Progress value={60} aria-label="Upload" className="w-full max-w-xs" />
}

Installation

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/progress.json

Usage

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

Examples

With label and value

Syncing products
x
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"

export function ProgressWithLabelAndValue() {
  const [value, setValue] = React.useState(13)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Progress value={value}>
        <ProgressLabel>Syncing products</ProgressLabel>
        <ProgressValue />
      </Progress>
      <div className="flex gap-2">
        <Button
          variant="secondary"
          size="sm"
          onClick={() => setValue((v) => Math.max(0, v - 20))}
        >
          −20
        </Button>
        <Button
          variant="secondary"
          size="sm"
          onClick={() => setValue((v) => Math.min(100, v + 20))}
        >
          +20
        </Button>
      </div>
    </div>
  )
}

Empty and complete

Not started
x
Done
x
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"

export function ProgressEmptyAndComplete() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Progress value={0}>
        <ProgressLabel>Not started</ProgressLabel>
        <ProgressValue />
      </Progress>
      <Progress value={100}>
        <ProgressLabel>Done</ProgressLabel>
        <ProgressValue />
      </Progress>
    </div>
  )
}

API Reference

Progress is built on the Base UI Progress primitive. See the Base UI documentation for every prop.

PopoverQuestionnaire