File upload list with progress & status.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Rows of 4 files, each with a file icon, a cut off name, a 4px bar and the time left or Complete at the end
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
- Rows that mark each document by format with a colored PDF or XLSX icon: use the File Type component
- A queue that also collects the documents the user drops or picks: use the File Upload component
- Numbered steps the user can open or move between, each with its own panel: use the Stepper component
- A wait of unknown length, where no share of the work done can be shown: use the Spinner component
Agent notes
- Replace
files; eachprogressandstatusis fixed, andstatusholds both the time left and the Complete label ItemTitletakes a pointer cursor and hover underline but has no link or handler, so wrap the name in a link or drop those classesProgressLabelandProgressValueexist in the base twin only; radixProgressdrops its children, so print the label and percent beside it- Set bar height on the
progress-trackslot in base, asc-progress-2does, and with a height class onProgressin radix, whose root is the track - Only a base
ProgressLabelnames the bar for screen readers; give every other bar, radix ones included, an aria-label naming the task
https://reui.io/components/progress/c-progress-5.mdget_example("c-progress-5")npx shadcn@latest add @reui/c-progress-5About Shadcn Progress File Uploads
File upload list with progress & status. Built by composing Item, Progress. A free, open source shadcn progress example you can install with npx shadcn@latest add @reui/c-progress-5 and edit as your own code.
What You Can Build With Shadcn Progress File Uploads
- Composes Item, Progress, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-progress-5
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Progress Examples
- Basic Basic progress.
- Small Small progress.
- Large Large progress.
- Status Messages Progress bar with status messages.
- With Slider Progress bar with slider.
- Multi-Step Multi-step progress indicator
- Custom Colors Progress bar with custom colors.
Related Shadcn Component Categories
Open-source shadcn questionnaire components for onboarding surveys, multi-step question flows, and guided feedback.
Open-source shadcn radio group components for single-choice forms, plan selection, and settings preferences.
Open-source shadcn rating components for product reviews, feedback forms, and satisfaction scores.
Open-source shadcn resizable components for split panes, workspace layouts, and draggable dividers.
Open-source shadcn scroll area components for custom scroll regions, sidebar panes, and dense lists.
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Frequently Asked Questions
When should I use Shadcn Progress File Uploads?
Use it for rows of 4 files, each with a file icon, a cut off name, a 4px bar and the time left or Complete at the end.
Shadcn Progress as a whole fits:
- 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
For rows that mark each document by format with a colored PDF or XLSX icon, use the File Type component. For a queue that also collects the documents the user drops or picks, use the File Upload component. For numbered steps the user can open or move between, each with its own panel, use the Stepper component. For a wait of unknown length, where no share of the work done can be shown, use the Spinner component.
How do I install Shadcn Progress File Uploads?
Is Shadcn Progress File Uploads free to use?
Which components does Shadcn Progress File Uploads use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.