# Confetti (/docs/components/upload-confetti)



<ComponentPreview name="upload-confetti" />

## Installation [#installation]

<Tabs items="[&#x22;Command&#x22;, &#x22;Manual&#x22;]">
  <Tab value="Command">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @uploadcn/upload-confetti
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @uploadcn/upload-confetti
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @uploadcn/upload-confetti
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @uploadcn/upload-confetti
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Manual">
    Install [Upload](/docs/components/upload) and `motion`, then copy:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add motion
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <ComponentSource name="upload-confetti" />
  </Tab>
</Tabs>

## Usage [#usage]

```tsx
import { UploadConfetti } from "@/components/upload-confetti"
```

```tsx
<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 [#props]

<TypeTable
  type="{
  count: { type: &#x22;number&#x22;, default: &#x22;28&#x22;, description: &#x22;Pieces per burst.&#x22; },
  onlyOnSuccess: {
    type: &#x22;boolean&#x22;,
    default: &#x22;true&#x22;,
    description: &#x22;Skip the burst if any file failed.&#x22;,
  },
  className: { type: &#x22;string&#x22; },
}"
/>