Progress

Displays the status of a task that takes a long time.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/progress.json


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


<Progress value={50} />

Use value and to control the progress bar.

Use the orientation prop to orient the progress bar horizontally or vertically.

Use <ProgressValue /> and <FieldLabel /> to add a label to the progress bar.

Use the indeterminate prop when the completion percentage is unknown.

Root element of the progress bar.

Prop	Type	Default
`value`	`number \| null`	-
`defaultValue`	`number`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`indeterminate`	`boolean`	`false`
`min`	`number`	`0`
`max`	`number`	`100`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

On This Page