Progress
Displays completion progress as a bar, built on Base UI. Four sizes, a segmented type, and optional label and value parts.
Playground
<Progress value={50} className="w-80">
<ProgressLabel>Downloading</ProgressLabel>
<ProgressValue />
</Progress>Preview
Progress renders the bar automatically – pass ProgressLabel and ProgressValue as children to add the caption row. ProgressValue shows the current percentage.
<Progress value={72} className="w-80">
<ProgressLabel>Downloading</ProgressLabel>
<ProgressValue />
</Progress>Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/progress.jsonUsage
import {
Progress,
ProgressTrack,
ProgressIndicator,
ProgressSegments,
ProgressLabel,
ProgressValue,
} from "@/components/ui/progress"<Progress value={60} className="w-80" />Sizes
size controls the bar height: sm (2px), default (4px), lg (8px) and xl (12px).
<Progress value={60} size="sm" className="w-80">
<ProgressLabel>Small</ProgressLabel>
<ProgressValue />
</Progress>
<Progress value={60} size="default" className="w-80">
<ProgressLabel>Default</ProgressLabel>
<ProgressValue />
</Progress>
<Progress value={60} size="lg" className="w-80">
<ProgressLabel>Large</ProgressLabel>
<ProgressValue />
</Progress>
<Progress value={60} size="xl" className="w-80">
<ProgressLabel>Extra Large</ProgressLabel>
<ProgressValue />
</Progress>Edge style
edge switches the indicator between round-edge (fully rounded) and square-edge (square leading edge); the track itself stays pill-shaped.
<Progress value={60} size="lg" edge="round-edge" className="w-80">
<ProgressLabel>Round Edge</ProgressLabel>
<ProgressValue />
</Progress>
<Progress value={60} size="lg" edge="square-edge" className="w-80">
<ProgressLabel>Square Edge</ProgressLabel>
<ProgressValue />
</Progress>Segmented
type="segmented" replaces the continuous track with five equal segments; the filled count is rounded from the current percentage. It combines with size and edge – square-edge segments keep rounded outer corners.
<Progress value={60} type="segmented" className="w-80">
<ProgressLabel>Default</ProgressLabel>
<ProgressValue />
</Progress>
<Progress value={60} type="segmented" edge="square-edge" size="lg" className="w-80">
<ProgressLabel>Large</ProgressLabel>
<ProgressValue />
</Progress>API reference
Progress accepts all Base UI progress root props plus the variant props below. Children render before the bar in a flex-wrap row, so a label/value pair forms a caption line above the full-width track. The track, indicator and segment parts are exported for fully custom composition but are rendered automatically by the root.
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | – | Current value. Pass null for an indeterminate progress bar. |
| min | number | 0 | Minimum of the range. |
| max | number | 100 | Maximum of the range. |
| size | "sm" | "default" | "lg" | "xl" | "default" | Bar height: 2px, 4px, 8px or 12px. |
| edge | "round-edge" | "square-edge" | "round-edge" | Indicator (and segment) corner style – rounded or square. |
| type | "default" | "segmented" | "default" | Continuous track with indicator, or five discrete segments. |
| Component | Description |
|---|---|
| ProgressLabel | Caption text (data-slot="progress-label"), announced as the bar’s accessible label by Base UI. |
| ProgressValue | Formatted current value (data-slot="progress-value"), pushed to the trailing edge with ml-auto. |
| ProgressTrack | Full-width background rail (data-slot="progress-track"). Height follows the root size via group data attributes. |
| ProgressIndicator | Filled portion of the track (data-slot="progress-indicator"), width managed by Base UI with a transition. |
| ProgressSegments | Five-segment bar (data-slot="progress-segments"); each segment (data-slot="progress-segment") sets data-filled when active. |
Accessibility & styling hooks
Base UI renders the root with role="progressbar" and keeps aria-valuenow, aria-valuemin and aria-valuemax in sync with your props. The root reflects its variants as data-size, data-edge and data-type, and every part exposes a data-slot attribute. The progressVariants cva helper is also exported.