Progress

Installation

The Progress component is part of the design system. Import it from the UI package.

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

Usage

Use Progress with a value (0–100) and optional label placement and variant. Copy the example below to get started.

<Progress value={30} />

Variants

Copy any example below to use in your project. Progress supports label placements (none, right, top, floating) and solid/inset variants.

API Reference

The Progress component displays the status of a task or process. It supports value, max, label placement, and variant.

Progress also accepts all standard HTMLDivElement attributes.

interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number
  max?: number
  label?: string
  labelPlacement?: "none" | "right" | "top" | "floating-top" | "floating-bottom"
  variant?: "solid" | "inset"
  showMinDot?: boolean
}