Progress

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/progress.json

npx shadcn@latest add https://prototyper-ui.com/r/progress.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/progress.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/progress.json

This will add the following files to your project:

• components/ui/progress.tsx

Usage

import { Progress, ProgressLabel } from "@/components/ui/progress"

<Progress value={50}>
  <ProgressLabel>Loading...</ProgressLabel>
</Progress>

Anatomy

<Progress>
  <ProgressLabel />
  <ProgressValue />
  {/* ProgressTrack and ProgressIndicator are rendered internally by Progress */}
</Progress>

Note: ProgressTrack and ProgressIndicator are rendered automatically inside the Progress component. You do not need to include them manually.

Examples

Custom Format

Reusable

Value Format

Styling

Data Slots

Use data-slot attributes to target specific parts of the progress bar:

Customization Examples

/* Make the progress track taller */
[data-slot="progress-track"] {
  @apply h-4 rounded-lg;
}

/* Custom indicator with gradient */
[data-slot="progress-indicator"] {
  @apply bg-gradient-to-r from-green-500 to-emerald-500;
}

{/* Override color via the color prop */}
<Progress value={75} color="success">
  <ProgressLabel>Upload</ProgressLabel>
</Progress>

API Reference

Progress

Root component that provides progress value context and renders the track and indicator internally.

All Base UI Progress.Root props are forwarded via ...props.

ProgressTrack

Background track that contains the indicator. Rendered automatically by Progress.

All Base UI Progress.Track props are forwarded via ...props.

ProgressIndicator

The filled portion of the track representing current progress. Rendered automatically by Progress.

All Base UI Progress.Indicator props are forwarded via ...props.

ProgressLabel

Accessible label for the progress bar.

All Base UI Progress.Label props are forwarded via ...props.

ProgressValue

Displays the current progress value as formatted text.

All Base UI Progress.Value props are forwarded via ...props.

progressTrackVariants

A cva helper exported for applying progress track styles outside of the <ProgressTrack> component.

import { progressTrackVariants } from "@/components/ui/progress"

<div className={progressTrackVariants({ color: "success" })}>Custom track</div>

progressIndicatorVariants

A cva helper exported for applying progress indicator styles outside of the <ProgressIndicator> component.

import { progressIndicatorVariants } from "@/components/ui/progress"

<div className={progressIndicatorVariants({ color: "warning" })}>Custom indicator</div>

Accessibility

Keyboard Interactions

The progress bar is a non-interactive display element and does not have keyboard interactions. Focus management is handled by surrounding interactive elements.

ARIA Attributes

• The progress bar renders with role="progressbar" via the Base UI primitive.
• aria-valuenow reflects the current value.
• aria-valuemin and aria-valuemax define the range.
• When value is null, the progress bar enters indeterminate mode and aria-valuenow is removed.
• aria-labelledby is automatically linked to ProgressLabel when present.
• The data-indeterminate attribute is set when value is null, and data-complete is set when value equals max.
• Screen readers announce the progress value and its label.

Related