Progress

Copy Markdown

Displays task progress with a linear indicator.

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/progress

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

<Progress value={50} />

Use value and to control the progress bar.

PreviewCode

Controlled progress

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

PreviewCode

PreviewCode

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

PreviewCode

Upload progress66%

Use the indeterminate prop when the completion percentage is unknown.

PreviewCode

Establishing connection...

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"`
`className`	`string`	-

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

[

Popover ](/docs/components/popover)[

Prose ](/docs/components/prose)

On This Page