Progress

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

Default (h-1, square)

Sizes (sm, md, lg)

Shape (Pill)

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/progress.json"

After you add the component with the CLI, import it from your UI folder:

import { Progress } from "@/components/ui/progress"
 
export function MyComponent() {
  return <Progress value={33} />
}

The component uses Radix UI Primitives. For a complete API reference, please refer to the Radix UI Progress Documentation.

Prop	Type	Default	Description
`value`	`number \| null`	`null`	The progress value from `0` to `max`. Set to `null` for indeterminate state.
`max`	`number`	`100`	The maximum progress value.
`size`	`"default" \| "sm" \| "md" \| "lg"`	`"default"`	The height of the progress bar.
`shape`	`"default" \| "pill"`	`"default"`	The border radius shape of the progress bar.
`indicatorClassName`	`string`	-	Additional CSS classes for the inner progress indicator element, useful for customizing color.

On This Page