Progress

A progress bar shows how far along a task or operation is, from a starting value to completion. Use it for uploads, downloads, or any determinate loading; for a static reading within a fixed range, use Meter instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/progress

Usage

import {
  ProgressRoot,
  ProgressTrack,
  ProgressIndicator,
} from "@/components/ui/cubby-ui/progress";

<ProgressRoot>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</ProgressRoot>

Composition

ProgressRoot
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Examples

Different Sizes

Use size to set the track height and text size.

Custom Colors

Pass a className to ProgressIndicator to recolor the filled bar.

With Label

Add ProgressLabel and ProgressValue to caption the bar.

Dynamic Progress

Set animated on ProgressRoot to ease the indicator between values as they update.

File Upload

Drive value from an upload's progress; the bar shows a completed state when it reaches max.

API Reference

The Progress component is built on top of Base UI's Progress. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Progress documentation.

Props

ProgressRoot

ProgressTrack

ProgressValue