Progress

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

tsx
"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

CLI

bash
npx fivui add progress

Manual

Install the following dependencies:

bash
npm install @radix-ui/react-progress

Usage

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

Examples

Simple

A basic progress bar with a fixed value.

Simple Progress
Progress bar with 33% completion
tsx
import { Progress } from "@/components/ui/progress"
export function ProgressSimple() {
return <Progress value={33} className="w-full" />
}

With Steps

Progress bar with percentage display and animated steps.

Progress with Steps
Animated progress with percentage display
Progress0%
tsx
"use client"
import * as React from "react"
import { Progress } from "@/components/ui/progress"
export function ProgressWithSteps() {
const [progress, setProgress] = React.useState(0)
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prev) => {
if (prev >= 100) return 0
return prev + 10
})
}, 500)
return () => clearInterval(timer)
}, [])
return (
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Progress</span>
<span>{progress}%</span>
</div>
<Progress value={progress} className="w-full" />
</div>
)
}

API Reference

Progress

Used to show the completion progress of a task or process.

PropTypeDefaultDescription
valuenumber-The progress value (0-100).
maxnumber100The maximum progress value.
getValueLabelfunction-A function to get the accessible label text representing the current value.

External Documentation

Progress is built on top of Radix UI Progress. For more advanced usage and API details, refer to the official documentation.

View Radix UI Progress Documentation