Progress

Name: Rad UI
Author: Rad UI Team

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

React
"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>
    )
}

Features

Displays completion status visually as a horizontal bar
Supports minimum and maximum value configuration
Customizable color themes
Smooth animations for value changes

API Documentation

Root

Root component for the Progress component.

Prop	Type	Default
value	number \| null	0
minValue	number	0
maxValue	number	100
customRootClass	string	''
children	ReactNode	--
getValueLabel	function	--

Indicator

Indicator component for the Progress component.

Prop	Type	Default
asChild	boolean	false
className	string	--
style	CSSProperties	--