Components

Progress

Linear progress bars (4 label layouts) and circular/half-circle indicators (5 sizes) - components/base/progress-indicators/progress-indicators.tsx and progress-circles.tsx.

Component Playground

Live instance.

60%

Controls

Type

Value

Label position

Linear

ProgressBarBase is the bare track - no label. ProgressBar wraps it with a labelPosition: inline to the right, below the bar, or a floating tooltip above/below the fill.

ProgressBarBase (no label)

right / bottom

40%

65%

top-floating / bottom-floating

30%

80%

Circle

5 sizes - xxs through lg. A label (e.g. "Complete") renders above the percentage once the circle is big enough to hold both (everything but xxs).

XXS / XS / SM / MD / LG

68%

Half circle

Same API and sizes as ProgressBarCircle, a gauge shape instead of a full ring.

XXS / XS / SM / MD / LG

68%

API

ProgressBarBase / ProgressBar

ProgressBar extends ProgressBarBase's props with labelPosition.

Prop	Type	Default
`value`	`number`	`-`
`min`	`number`	`0`
`max`	`number`	`100`
`className`	`string`	`-`
`progressClassName`	`string`	`-`
`valueFormatter`	`(value, percentage) => string \| number`	`-`
`labelPosition`	`"right" \| "bottom" \| "top-floating" \| "bottom-floating"`	`-`

ProgressBarCircle / ProgressBarHalfCircle

Prop	Type	Default
`value`	`number`	`-`
`min`	`number`	`0`
`max`	`number`	`100`
`size`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg"`	`-`
`label`	`string`	`-`
`valueFormatter`	`(value, percentage) => string \| number`	`-`

Usage

import { ProgressBar, ProgressBarBase } from "@/components/base/progress-indicators/progress-indicators";
import { ProgressBarCircle, ProgressBarHalfCircle } from "@/components/base/progress-indicators/progress-circles";

<ProgressBarBase value={45} />
<ProgressBar value={65} labelPosition="right" />

<ProgressBarCircle value={68} size="md" label="Complete" />
<ProgressBarHalfCircle value={68} size="md" />

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.