Shadcn.io is not affiliated with official shadcn/ui
Multi-line Label
A progress bar with multi-line label showing title, subtitle, and percentage for rich contextual progress information at 35 percent
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.
Multi-line Label preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.