Component

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

View component changelog
preview
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 aria-label="Upload progress" 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
number | null
0
minValue
number
0
maxValue
number
100
customRootClass
string
''
children
ReactNode
--
getValueLabel
function
--
format
Intl.NumberFormatOptions
--
locale
string
browser locale

A visible name; the root is labelled by it.

PropTypeDefault
children
ReactNode
--

The current value as visible text: getValueLabel, then format, otherwise a rounded percentage. Hidden from screen readers, which hear the value from the root.

PropTypeDefault
children
(formatted, value) => ReactNode
--

The bar behind the Indicator. Optional; use it to place Label and Value beside the bar.

PropTypeDefault
className
string
--

Indicator component for the Progress component.

PropTypeDefault
asChild
boolean
false
className
string
--
style
CSSProperties
--
ShortcutDescription
Tab

Moves focus to interactive controls associated with the progress indicator.

ReferenceWhat Rad UI follows
Progressbar role

Uses progressbar semantics with aria-valuenow for determinate progress. aria-valuemin and aria-valuemax are optional for the default 0 to 100 range, aria-valuetext is only needed when the numeric value is not meaningful on its own, and indeterminate progress omits aria-valuenow.

Edit this page on GitHub →