Progress Bar

Progress indicators in six styles: bar with percentage, inline label, compact, step segments, label above bar, and stepper with labels.

Installation

tsx

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

Basic usage

Pass currentStep and totalSteps. Progress is computed as (currentStep / totalSteps) * 100.

tsx

<ProgressBar type="1" currentStep={2} totalSteps={4} />

50% Complete

Types

1 – Bar with percentage below; optional icon and topSlot
2 – Bar with label inside the fill
3 – Compact bar with percentage to the right
4 – Segmented steps (blocks)
5 – Label above the bar
6 – Stepper with circles and optional stepLabels

tsx

<ProgressBar type="2" currentStep={4} totalSteps={5} />
<ProgressBar type="4" currentStep={2} totalSteps={5} />
<ProgressBar
  type="6"
  currentStep={1}
  totalSteps={3}
  stepLabels={["Details", "Review", "Pay"]}
/>

80%80% Complete

Step 2 of 5

Details

Review

Pay

With icon (type 1)

tsx

<ProgressBar
  type="1"
  currentStep={2}
  totalSteps={4}
  icon={<Check className="size-5 text-primary-foreground" />}
/>

50% Complete

Props

Prop	Type	Default	Description
type	"1" \| "2" \| "3" \| "4" \| "5" \| "6"	"1"	Visual style (see Types section).
currentStep*	number	-	Current step (1-based) or progress numerator.
totalSteps*	number	-	Total steps or progress denominator.
stepLabels	string[]	-	Labels for each step (used by type 6).
backgroundColor	string	var(--muted)	Track/background color.
foregroundColor	string	var(--primary)	Fill/active color.
icon	ReactNode	-	Icon shown on the bar (type 1).
topSlot	ReactNode	-	Content above the bar (type 1).
className	string	-	Additional CSS classes for the wrapper.