Progress

Displays an indicator showing the completion progress of a task. Fills from the inline start — works in LTR and RTL.

Show task completion with a value from 0 to 100.

Installation

CLI

npx @sonojs/ui@latest add progress

structure

Progress

progress.tsx

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

export function Example() {
  return <Progress value={33} />
}

Prop	Type	Default	Description
value	number · null · undefined	—	Completion from `0` to `100`. Omit for indeterminate when supported by the primitive.
max	number	100	Maximum value used for the accessible progress range.
className	string	—	Merge extra Tailwind classes on the root track.