Progress

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>

Examples

Different Sizes

Display progress bars in various sizes.

Custom Colors

Apply custom color schemes to progress bars.

With Label

Add labels to show progress percentage or status.

Dynamic Progress

Animated progress that updates over time.

File Upload

Progress indicator for file upload operations.

API Reference

ProgressRoot

ProgressTrack

ProgressValue

Additional Props

Progress components inherit all props from Base UI Progress, including value, defaultValue, onChange, and accessibility props.