Shadcn Progress

Browse 8 production-ready shadcn progress components for file uploads, long operations, and task completion tracking. Progress is compatible with Radix UI and Base UI stacks and fully aligned with Shadcn Create so radius, colors, and typography match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

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 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

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

Markdownhttps://web.dev.reui.io/components/progress.md

MCPget_component("progress")

Installnpx shadcn@latest add progress

Full index for agents:llms.txtReUI MCP setup

Shadcn Progress: Visualize Task Completion and Status

Shadcn Progress is a visual indicator that shows the completion percentage of a task: file uploads, downloads, form validation, or long-running operations. Built on Radix UI Progress with full WAI-ARIA support, it fits seamlessly into Radix and Base UI stacks while maintaining full compatibility with Shadcn Create style tokens.

It displays a horizontal or vertical bar that fills from 0% to 100%, optionally with animated indeterminate states when the total duration is unknown, and clear labels so users understand what is being tracked.

ReUI lists progress components inside file upload flows, dashboards, and checkout steps so you evaluate how progress pairs with Shadcn Spinner, Shadcn Alert for status updates, and Shadcn Button actions. The sections below explain what the component is, why it matters, key features, and integration guidance.

What is Shadcn Progress?

A progress bar is a visual indicator showing how much of a task is complete. Shadcn Progress wraps Radix UI primitives to provide accessible, themeable progress indicators that work with Tailwind styling and render clear roles for assistive technologies.

Components here show determinate progress (0 to 100% with a known duration), indeterminate progress (animated, duration unknown), color-coded status (success, warning, danger), and stacked progress for multi-step workflows. They help you choose a component, decide when to show a spinner vs. a progress bar, and integrate progress with form submission feedback.

Why Use Shadcn Progress?

Progress bars reduce anxiety during long operations by showing users that something is happening. File uploads, API calls, and batch processes all benefit from visible feedback so users don't think the app has frozen.

The components on this page show how progress bars pair with Shadcn Field labels, Shadcn Button actions (pause, cancel), and status messages so users stay informed and confident.

Shadcn Progress Features

Determinate and Indeterminate. Set a value prop (0 to 100) to show known progress, or omit it for animated indeterminate state when duration is unknown.
Accessible Roles. Uses progressbar role and aria-valuenow/aria-valuemin/aria-valuemax so screen readers announce percentage and completeness.
Color Variants. Success (green), warning (yellow), and destructive (red) variants communicate status beyond the percentage, important for at-a-glance understanding.
Label Support. Pair with Shadcn Field label or helper text to describe what is being tracked, e.g., 'Uploading: 3 of 12 files (25%)'.
Smooth Animations. Transitions between percentage changes are smooth and perceptible, respecting prefers-reduced-motion for users with motion sensitivity.

Pair progress with Shadcn Spinner when you want to show both indeterminate motion (early stages) and a deterministic percentage (later stages). Combine with Shadcn Button for cancel or pause actions that users can trigger if the operation takes too long.

Show progress inside a Shadcn Card or modal for prominent uploads. Add a Shadcn Field label above the bar ('Uploading file.pdf...') and helper text below ('3 of 5 files done, 45 seconds remaining').

When the operation completes, replace the progress bar with a Shadcn Alert showing success or failure. Use Shadcn Badge to mark completed tasks in a list, and Shadcn Skeleton to preview final content while previous uploads are finishing.

Stats Blocks in ReUI Pro

The free examples above pair with 17 production ready stats blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Stats (17 blocks)Stat components and layouts for KPIs, metric summaries, and compact performance signals.

Browse all Application blocks

Frequently Asked Questions

Should I show a spinner or progress bar for an async operation?

Use a progress bar when you know or can estimate the task duration and want to show how much is complete (determinate). Use a spinner (or indeterminate progress) when duration is unknown. Pair progress bars with estimated time remaining text for best UX.

How do I update progress in real time as an API call completes?

Maintain a React state (e.g., setProgress) and update it as events arrive: start at 0%, increment on chunk upload, reach 100% when the API call completes. Smooth transitions are automatic in CSS; avoid jumping from 0% to 100% in one step.

Can I show progress for multiple items or operations at once?

Yes. Stack multiple progress bars inside a list or grid, each tracking one upload. Show individual progress and an overall summary bar so users see both granular and aggregate completion.

How do I make a progress bar accessible?

Shadcn Progress includes proper roles (progressbar) and ARIA attributes (aria-valuenow, aria-valuemax). Always pair with a visible label describing what is being tracked, and consider adding aria-label if the purpose is unclear from context.

Should I display the percentage number on the progress bar?

Show a percentage if it's meaningful and space permits. For tight layouts, place the text next to the bar or in a Shadcn Field helper. Always show a human-readable description (e.g., '3 of 10 files uploaded') alongside the percentage.

Can the user cancel or pause a task shown in a progress bar?

Yes. Place a Shadcn Button next to the progress bar for cancel or pause actions. When cancelled, show a dismissal option or move to an error state with a Shadcn Alert explaining what happened.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.