Progress

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/progress.json

import { Progress } from "@/components/ui/progress"

<Progress variant="slim" value={33} />

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

Property	Type	Default	Description
`value`	number	`0`	The current progress value, typically between 0 and 100.
`variant`	"default" \| "slim" \| "outline"	`"default"`	Visual style of the progress bar.
`indicatorClassName`	string	`_`	Optional CSS class applied to the progress indicator.
`indicatorStyle`	React.CSSProperties	`_`	Optional inline styles applied to the progress indicator.
`className`	string	`_`	CSS class for the outer progress container.
`style`	React.CSSProperties	`_`	Inline styles for the outer progress container.
`children`	React.ReactNode	`_`	Optional children to render inside the progress container (rarely used).