Progress Bar

Tremor-style progress bar with semantic variants.

Variants

Default

Neutral

Success

Warning

Error

Interactive — with animation

60%

Without label

Custom max (value=3, max=5)

3/5

ProgressBar

A Tremor-style horizontal progress bar with semantic color variants, optional animation, and an optional label. Accepts values from 0 to max (default 100).

Usage

import { ProgressBar } from "@/components/charts/progress-bar"

<ProgressBar value={60} variant="default" label="60%" />
<ProgressBar value={3} max={5} showAnimation label="3/5" />

Props

Prop	Type	Default	Description
value	number	0	Current progress value.
max	number	100	Upper boundary value.
variant	"default" \| "neutral" \| "success" \| "warning" \| "error"	"default"	Color scheme of the bar.
showAnimation	boolean	false	Enables a CSS transition when the value changes.
label	string	—	Optional text displayed to the right of the bar.
className	string	—	Extra classes applied to the outer wrapper.