Stepper Progress 1 - Synced progress bar

Pro

Stepper with a Progress bar that updates as the active step changes.
Shadcn Stepper Progress 1 component

Component data

ID
stepper/stepper-progress-1
Access
pro
Created
Jul 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Stepper Progress 1 component design & features

This example pairs a Dice UI Stepper with a shadcn Progress bar whose value is derived from the active step index.

Synced progress bars help communicate overall completion in project workflows, courses, and long onboarding sequences.