Shadcn Progress

React progress component for loading indicators and progress bars. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.

Progress bar not updating?

Join our Discord community for help from other developers.

Ever uploaded a file and stared at a blank screen wondering if your internet died? Or clicked submit on a form and had no clue if it was processing or just frozen? Yeah, that's exactly why progress bars exist. This shadcn/ui progress component shows users that stuff is actually happening instead of leaving them in the dark about your React applications.

Progress showcase

Watch it fill up as your task completes:

Loading component...

Built on Radix UI Progress with proper ARIA attributes so screen readers announce the progress automatically. Styled with Tailwind CSS to match your design system instead of looking like a generic loading bar from 2010.

npx shadcn@latest add progress

Why progress bars actually beat spinners for user experience

Here's the thing—sometimes a spinner just doesn't cut it. When users are waiting for something important like file uploads or account creation, they need to know more than "something is happening." They need to know if they should grab coffee or stick around for 30 more seconds.

Think about how frustrating it is when an app update shows no progress, versus when you can see it's 73% complete with 2 minutes remaining. Progress bars set expectations, reduce anxiety about unknown wait times, and help users make decisions about whether to wait or come back later. Plus they prove your app didn't crash.

This free shadcn progress component handles the complex parts—accessibility attributes, screen reader announcements, state management—while you focus on providing accurate progress data. Whether you're building file upload interfaces, multi-step forms, or data processing workflows in your Next.js applications, progress indicators that inform users keep them engaged in your JavaScript projects.

Common progress patterns you'll actually use

File upload progress

Show real upload progress with file information:

Loading component...

"use client"import * as React from "react"import { Progress } from "@/components/ui/progress"import { Button } from "@/components/ui/button"import { Upload, X, CheckCircle } from "lucide-react"export default function ProgressUpload() {  const [progress, setProgress] = React.useState(0)  const [isUploading, setIsUploading] = React.useState(false)  const simulateUpload = () => {    setIsUploading(true)    setProgress(0)        const interval = setInterval(() => {      setProgress((prev) => {        if (prev >= 100) {          clearInterval(interval)          setTimeout(() => {            setIsUploading(false)            setProgress(0)          }, 1000)          return 100        }        return prev + 10      })    }, 300)  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-4">        {!isUploading ? (          <Button onClick={simulateUpload} className="w-full">            <Upload className="mr-2 h-4 w-4" />            Upload File          </Button>        ) : (          <div className="space-y-2">            <div className="flex items-center justify-between text-sm">              <span className="text-muted-foreground">                {progress < 100 ? "Uploading document.pdf..." : "Upload complete!"}              </span>              <span className="font-medium">                {progress}%              </span>            </div>            <Progress value={progress} className="w-full" />            <div className="flex items-center justify-between text-xs text-muted-foreground">              <span>2.4 MB / 3.2 MB</span>              {progress < 100 ? (                <Button variant="ghost" size="sm" className="h-6 px-2">                  <X className="h-3 w-3" />                  Cancel                </Button>              ) : (                <CheckCircle className="h-4 w-4 text-green-500" />              )}            </div>          </div>        )}      </div>    </div>  )}

Multi-step form progress

Track progress through wizards and onboarding flows:

Loading component...

"use client"import * as React from "react"import { Progress } from "@/components/ui/progress"import { Button } from "@/components/ui/button"import { ChevronLeft, ChevronRight } from "lucide-react"export default function ProgressSteps() {  const [currentStep, setCurrentStep] = React.useState(1)  const totalSteps = 4  const progress = (currentStep / totalSteps) * 100  const steps = [    "Personal Info",    "Account Setup",     "Preferences",    "Review"  ]  const nextStep = () => {    if (currentStep < totalSteps) {      setCurrentStep(currentStep + 1)    }  }  const prevStep = () => {    if (currentStep > 1) {      setCurrentStep(currentStep - 1)    }  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-6">        <div className="space-y-2">          <div className="flex justify-between text-sm">            <span className="font-medium">              Step {currentStep} of {totalSteps}            </span>            <span className="text-muted-foreground">              {steps[currentStep - 1]}            </span>          </div>          <Progress value={progress} className="w-full" />        </div>                <div className="flex justify-between">          <Button            variant="outline"            size="sm"            onClick={prevStep}            disabled={currentStep === 1}          >            <ChevronLeft className="mr-1 h-4 w-4" />            Previous          </Button>          <Button            size="sm"            onClick={nextStep}            disabled={currentStep === totalSteps}          >            {currentStep === totalSteps ? "Complete" : "Next"}            {currentStep !== totalSteps && (              <ChevronRight className="ml-1 h-4 w-4" />            )}          </Button>        </div>      </div>    </div>  )}

Loading states with progress

Better than spinners when you know the timeline:

Loading component...

"use client"import * as React from "react"import { Progress } from "@/components/ui/progress"import { Button } from "@/components/ui/button"import { RefreshCw } from "lucide-react"export default function ProgressLoading() {  const [progress, setProgress] = React.useState(0)  const [isLoading, setIsLoading] = React.useState(false)  const [status, setStatus] = React.useState("")  const startLoading = () => {    setIsLoading(true)    setProgress(0)    setStatus("Connecting to server...")        // Simulate different loading stages    setTimeout(() => {      setProgress(25)      setStatus("Fetching data...")    }, 500)        setTimeout(() => {      setProgress(50)      setStatus("Processing results...")    }, 1200)        setTimeout(() => {      setProgress(75)      setStatus("Preparing display...")    }, 2000)        setTimeout(() => {      setProgress(100)      setStatus("Complete!")      setTimeout(() => {        setIsLoading(false)        setProgress(0)        setStatus("")      }, 1000)    }, 3000)  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-4">        {!isLoading ? (          <Button onClick={startLoading} className="w-full">            <RefreshCw className="mr-2 h-4 w-4" />            Load Data          </Button>        ) : (          <div className="space-y-3">            <Progress value={progress} className="w-full" />            <div className="text-center">              <p className="text-sm text-muted-foreground">{status}</p>              {progress < 100 && (                <p className="text-xs text-muted-foreground mt-1">                  Please wait...                </p>              )}            </div>          </div>        )}      </div>    </div>  )}

Download progress indicator

File downloads with size and speed information:

Loading component...

Task completion progress

Background processes and data operations:

Loading component...

Features

This free open source progress component includes everything you need:

TypeScript-first - Full type safety with progress values and state management
Radix UI powered - Battle-tested accessibility and screen reader support
ARIA compliant - Proper progressbar role and value announcements
Tailwind CSS styled - Customize with utilities, not fighting component CSS
Indeterminate state - Support for unknown progress scenarios
Custom value ranges - Not limited to 0-100, use any min/max values
Screen reader friendly - Announces percentage and custom completion messages
State-based styling - Visual states for loading, complete, and indeterminate

API Reference

Core Component

Component	Purpose	Key Props
`Progress`	Progress indicator	`value`, `max`, `getValueLabel`

Progress States

State	Condition	Use Case
Loading	`0 < value < max`	Active progress with known completion
Complete	`value >= max`	Task finished successfully
Indeterminate	`value = null`	Progress unknown, show activity

Common Props

Prop	Type	Purpose
`value`	number \| null	Current progress value
`max`	number	Maximum progress value (default: 100)
`getValueLabel`	function	Custom screen reader announcement
`className`	string	Additional Tailwind classes

Production tips

Start progress immediately and keep it moving. This free shadcn/ui progress component works best when you show 1% right away so users know something started, then keep it moving consistently. This TypeScript component displays the value—you provide honest progress updates that don't hang at 90% forever in your Next.js applications.

Show what's actually happening with context. Don't just show a bar—add text like "Uploading photo..." or "Processing payment..." so users understand what's taking time. This open source shadcn component handles the visual progress, but you provide the context that reduces user anxiety.

Handle errors and cancellation gracefully. Long operations need escape hatches and clear error states. This JavaScript component shows the progress bar—your application logic handles what happens when things go wrong or users want to cancel at 67% completion.

Consider time estimates alongside progress bars. "About 30 seconds remaining" helps users make decisions about waiting. This Tailwind CSS styled component shows completion percentage, but time estimates based on current progress rate create better user experiences.

Use indeterminate state when progress is unknown. For operations where you can't measure progress accurately, use the indeterminate state with pulsing or moving animations. This component supports both known and unknown progress scenarios—choose based on what data you actually have.

Integration with other components

Progress bars naturally work with Button components for cancel actions and Dialog components for modal upload interfaces in your React applications. Use Form components with progress indicators for multi-step workflows.

For file operations, combine progress with Input components for file selection or Card components to display upload queues with individual progress bars. This open source pattern creates comprehensive file handling interfaces.

When building admin panels, pair progress with DataTable components for bulk operations or Alert components for completion notifications. The progress shows the current operation—other shadcn components handle the surrounding interface.

For loading states, use progress with Skeleton components while initial data loads or Sheet components for side panel operations. Your JavaScript application can compose these components while maintaining clear progress feedback.

Shadcn Progress

Progress showcase

Why progress bars actually beat spinners for user experience

Common progress patterns you'll actually use

File upload progress

Multi-step form progress

Loading states with progress

Download progress indicator

Task completion progress

Features

API Reference

Core Component

Progress States

Common Props

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Progress

Reactprogress

Reactprogress

Reactbutton

Reactprogress

Reactbutton

Reactprogress

Reactbutton

Reactprogress

Reactprogress

When should I use Progress vs loading spinners?

How do I handle indeterminate progress states?

How do screen readers announce progress updates?

How do I show progress for file uploads?

How do I show progress through multi-step forms?

Can I use progress bars with custom value ranges?

Can I customize progress bar animations?

How do I handle errors during progress operations?

On this page