HT|UI

ProgressBar

Name: Helptribe Dubai
Address: Marina Plaza, Level 28, Dubai Marina, Dubai, AE
Telephone: +971 4 456 7890

Multi-segment progress bar for displaying tiered measurements, fitness metrics, and score ranges. Highlights the active segment based on the current value.

Installation

$ npx shadcn@latest add progress-bar

Preview

45.3VO₂ MAX

Cardio Fitness

>15

GOOD

53+

Custom Segments

72SCORE

Performance

0-20

21-40

41-60

EXCELLENT

61-80

81-100

Usage (React/TSX)

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

export default function FitnessCard() {
  return (
    <div className="p-6 rounded-xl border border-zinc-800 bg-zinc-900/40">
      <ProgressBar
        currentValue={45.3}
        unit="VO₂ MAX"
        label="Cardio Fitness"
        activeLabel="GOOD"
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
currentValue	number	—	The current value to display and determine the active segment.
unit	string	""	Unit label displayed next to the value (e.g., 'VO₂ MAX', 'SCORE').
label	string	—	Descriptive label below the value.
activeLabel	string	"GOOD"	Label displayed above the active segment bar.
segments	ProgressBarSegment[]	defaultSegments	Array of segment objects with label, value threshold, color, and activeColor.
className	string	—	Additional CSS classes to apply.

Segment Props

Prop	Type	Default	Description
label	string	—	Label displayed below the bar segment.
value	number	—	Threshold value for this segment.
color	string	—	Background color when inactive.
activeColor	string	—	Background color when this segment is active.

Design Notes

5 segments with increasing height from left to right.
Active segment glows with its activeColor and scales up slightly.
Inner gradient highlight on active bar for depth.
Labels dim for inactive segments, highlighted for active.
Use for fitness metrics, score ranges, tiered measurements.