Basic progress.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A name on the left and its percent on the right, over a bar left at the active style's default height
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
- A bar that must stay 4px thin whatever the active style: use the Progress Small example
- A drop zone or picker where people choose the documents and images to send: 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
ProgressLabelandProgressValueexist 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-1.mdget_example("c-progress-1")npx shadcn@latest add @reui/c-progress-1Shadcn Components in Progress Basic
About Shadcn Progress Basic
Basic progress. Built with the Progress component. A free, open source shadcn progress example you can install with npx shadcn@latest add @reui/c-progress-1 and edit as your own code.
What You Can Build With Shadcn Progress Basic
- Composes Progress, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-progress-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Progress Examples
- Small Small progress.
- Large Large progress.
- Status Messages Progress bar with status messages.
- File Uploads File upload list with progress & status.
- 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 Basic?
Use it for a name on the left and its percent on the right, over a bar left at the active style's default height.
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 a bar that must stay 4px thin whatever the active style, use the Progress Small example. For a drop zone or picker where people choose the documents and images to send, 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 Basic?
Is Shadcn Progress Basic free to use?
Which components does Shadcn Progress Basic 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.