Overview

A progress indicator with three variants: bar (linear), ring (circular), and minimal (percentage only). Configurable sizes and optional label.

Installation

npx shadcn@latest add @elements/uploadthing-progress

Usage

import { UploadThingProgress } from "@/components/elements/uploadthing/uploadthing-progress";

export function UploadStatus() {
  const [progress, setProgress] = useState(0);

  return (
    <div className="space-y-4">
      <UploadThingProgress progress={progress} variant="bar" />
      <UploadThingProgress progress={progress} variant="ring" />
      <UploadThingProgress progress={progress} variant="minimal" />
    </div>
  );
}

Props

Variants

Bar

Linear progress bar with animated fill and percentage label below.

Ring

Circular SVG progress with percentage in center. Uses stroke-dasharray animation.

Minimal

Text-only percentage display in muted styling.

Features

• Three distinct variants
• Three size options (sm/md/lg)
• Optional percentage label
• Smooth animations
• Accessible progress semantics