Progress Bar - HapplyUI

A progress bar component to show the completion status of a task or process, with multiple color options.

Installation

bunx @happlyui/cli@latest add progress-bar

These are automatically installed when you add this component.

import * as ProgressBar from "@/components/ui/progress-bar"

<ProgressBar.Root value={50} max={100} color="blue" />

Progress bars in all available colors: blue (default), red, orange, green, and primary.

<ProgressBar.Root value={50} color="blue" />
<ProgressBar.Root value={50} color="red" />
<ProgressBar.Root value={50} color="primary" />

A progress bar with an inline percentage label.

55%

<div className="flex items-center gap-2">
  <ProgressBar.Root value={55} />
  <span className="text-paragraph-xs text-text-sub-600">55%</span>
</div>

A composed example with title, progress bar, percentage, and an upgrade link.

Data Storage55%

to unlock unlimited data storage.

<ProgressBar.Root value={55} />
<LinkButton.Root variant="primary" underline>Upgrade</LinkButton.Root>

The main progress bar component.

Prop	Type	Default	Description
`color`	`'blue' \| 'red' \| 'orange' \| 'green' \| 'primary'`	`'blue'`	The color of the progress indicator
`value`	`number`	`0`	The current progress value
`max`	`number`	`100`	The maximum progress value