Progress

Displays an indicator showing the completion progress of a task. Built on Base UI's progress primitive.

Last updated August 7, 2026

CreditsUnchangedPublished

Overview

import { Progress } from "@/components/ui/progress"
 
export function ProgressDemoExample() {
  return <Progress value={66} className="w-64" />
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/progress.json

Usage

import { Progress } from "@/components/ui/progress"
 
export function Example() {
  return <Progress value={66} />
}

Animated

Update value over time to animate the indicator.

"use client"
 
import * as React from "react"
 
import { Progress } from "@/components/ui/progress"
 
export function ProgressAnimatedExample() {
  const [value, setValue] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setValue(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress value={value} className="w-64" />
}

RTL

۶۶٪ آپلود شده

import { Progress } from "@/components/ui/progress"
 
export function ProgressRtlExample() {
  return (
    <div className="flex w-64 flex-col gap-2 text-sm">
      <span className="text-muted-foreground">۶۶٪ آپلود شده</span>
      <Progress value={66} />
    </div>
  )
}

API Reference

Progress

Prop	Type	Default	Description
value	number \| null	null	The current progress value. Pass null for an indeterminate state.
min	number	0	The minimum value.
max	number	100	The maximum value.

Edit this page on GitHub

PreviousNative Select NextRadio Group