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.
Prop | Type | Default | Description |
---|---|---|---|
value | number | - | The progress value (0-100). |
max | number | 100 | The maximum progress value. |
getValueLabel | function | - | 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