GitHub
New

Progress

PreviousNext

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

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

export default function ProgressDemo() {
  return <Progress value={66} class="w-[60%]" />
}

Installation

pnpm dlx shadcnui-hono-jsx@latest add progress

Usage

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

Composition

With label and value

Use ProgressLabel and ProgressValue to add a label and value display.

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

;<Progress value={56} class="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Label

Use ProgressLabel and ProgressValue to add a label and value display.

Upload progress
x
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

export function ProgressWithLabel() {
  return (
    <Progress value={56} class="w-full max-w-sm">
      <ProgressLabel>Upload progress</ProgressLabel>
      <ProgressValue />
    </Progress>
  )
}

Controlled

A progress bar that can be controlled by a slider.

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

export function ProgressControlled() {
  const value = 50

  return (
    <div class="flex w-full max-w-sm flex-col gap-4">
      <Progress value={value} class="w-full" />
      <Slider defaultValue={value} min={0} max={100} step={1} />
    </div>
  )
}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

تقدم الرفع
x

// This example sets dir and uses useTranslation because this site is not RTL.

// In an RTL app you won't need them; see the RTL guide.

import {
  type Translations,
  useTranslation,
} from "@/components/language-selector"
import { Progress, ProgressLabel } from "@/components/ui/progress"

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Upload progress",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "تقدم الرفع",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "התקדמות העלאה",
    },
  },
}

function toArabicNumerals(num: number): string {
  const arabicNumerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"]
  return num
    .toString()
    .split("")
    .map((digit) => arabicNumerals[parseInt(digit, 10)])
    .join("")
}

export function ProgressRtl() {
  const { dir, t, language } = useTranslation(translations, "ar")

  const formatNumber = (num: number): string => {
    if (language === "ar") {
      return toArabicNumerals(num)
    }
    return num.toString()
  }

  const value = 56

  return (
    <Progress value={value} class="w-full max-w-sm" dir={dir}>
      <ProgressLabel>{t.label}</ProgressLabel>
      {/* ProgressValue takes no render function: format the value in place. */}
      <span
        aria-hidden="true"
        class="ms-auto text-sm text-muted-foreground tabular-nums"
      >
        {formatNumber(value)}%
      </span>
    </Progress>
  )
}

Notes

  • Server-rendered: the progressbar is not linked to ProgressLabel (Base UI links them on the client); pass aria-label or aria-labelledby. Function children of ProgressValue are not supported.
  • Accepts class instead of className.
  • Upstream documentation: shadcn/ui Progress. See also Differences from shadcn/ui.

API Reference

See the Base UI Progress documentation.