UploadCN
DocsComponentsExamples

Confetti

Drop it inside any <Upload>: when a batch finishes, a burst of confetti in your theme's colors.

"use client"

import { UploadConfetti } from "@/components/upload-confetti"
import {
  Upload,
  UploadDropzone,
  UploadDropzoneDescription,
  UploadDropzoneTitle,
  UploadQueue,
} from "@/components/ui/upload"

export default function UploadConfettiExample() {
  return (
    <Upload className="relative max-w-md">
      <UploadDropzone>
        <UploadDropzoneTitle>Finish a batch to celebrate</UploadDropzoneTitle>
        <UploadDropzoneDescription>
          Confetti uses your theme's colors
        </UploadDropzoneDescription>
      </UploadDropzone>
      <UploadQueue size="sm" />
      <UploadConfetti />
    </Upload>
  )
}

Installation

npx shadcn@latest add @uploadcn/upload-confetti

Usage

import { UploadConfetti } from "@/components/upload-confetti"
<Upload className="relative">
  <UploadDropzone />
  <UploadQueue />
  <UploadConfetti />
</Upload>

It's a part, not a whole uploader: it reads the nearest <Upload>. Colors come from --primary and --chart-1…5, so it matches every theme. Give the parent relative.

Props

Prop

Type

On this page

InstallationUsageProps