Shadcn Progress Multi-Step

When to use

• Labeled bars that report how far an upload, a download or a workspace setup has got, as a percent
• File transfer rows with time left, and setup checklists whose bar counts the steps done
• Compact bars in dense list rows, and bars pinned to a set height or filled in a color of their own

When not to use

• Steps the user clicks through, each opening its own panel of content: use the Stepper component
• A drop zone or picker where people choose the documents and images to send: use the File Upload component
• A wait of unknown length, where no share of the work done can be shown: use the Spinner component

Agent notes

• Replace steps; the bar and the count come from each completed flag, and nothing in the example marks a step done
• progressValue turns the done count into a percent; keep it, since the radix bar reads its value as a percent and ignores a max prop
• ProgressLabel and ProgressValue exist in the base twin only; radix Progress drops its children, so print the label and percent beside it
• Set bar height on the progress-track slot in base, as c-progress-2 does, and with a height class on Progress in radix, whose root is the track
• Only a base ProgressLabel names the bar for screen readers; give every other bar, radix ones included, an aria-label naming the task