The Progress component visually represents the completion status of a task or process, such as uploading a file, loading content, or completing form steps.

"use client"
import Progress from "@radui/ui/Progress"
import Card from "@radui/ui/Card"

export default function ProgressExample() {
    return (
        <Card style={{width: "90%"}}>
            <Progress.Root value={30} maxValue={100} minValue={0}>
                <Progress.Indicator />
            </Progress.Root>
        </Card>
    )
}
  • Displays completion status visually as a horizontal bar
  • Supports minimum and maximum value configuration
  • Customizable color themes
  • Smooth animations for value changes

Root component for the Progress component.

PropTypeDefault

value

number0

minValue

number0

maxValue

number100

customRootClass

string''

Indicator component for the Progress component.

PropTypeDefault

asChild

boolean

false

Edit this page on GitHub