Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Progress - Multi-line Label
A progress bar with multi-line label showing title, subtitle, and percentage for rich contextual progress information at 35 percent
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Maximum context—title, subtitle, and percentage together. This React Progress component displays multi-line label with title (Project Setup), subtitle (Installing dependencies), and percentage (35%) using flex items-start justify-between layout. Built with shadcn/ui Progress and Radix UI primitives, multi-line format provides rich context—perfect for complex operations, detailed status updates, multi-stage processes, informative dashboards, or any operation requiring both high-level overview and specific detail.
Project Setup
Installing dependencies
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
With Percentage
Simple percentage display
With Label Above
Single label above bar
With Count
Progress with item count
Stepper
Multi-step indicator
Empty Progress
Progress without labels
Card
Card component layouts