# Drop Upload
URL: https://remocn.dev/docs/ui-blocks/drop-upload

A file card drops into a zone, becomes an upload row, fills a progress bar and ends on a check.

- Install: `npx shadcn@latest add @remocn/drop-upload`
- Vibe: clean
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/drop-upload
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DropUpload } from "@/components/remocn/drop-upload";

const DropUploadScene = () => (
  <DropUpload
    title="Drop in your launch notes"
    fileName="launch-notes.md"
    fileKind="MD"
    fileSize="2.4 MB"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="DropUpload"
    component={DropUploadScene}
    durationInFrames={162}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A drop zone appears with a title and hint, a file card flies in and drops, then collapses into an upload row. A progress bar fills and the row ends on a check mark. Pass your own `title`, `fileName`, `fileKind`, `fileSize` and `hint`; the `history` rows only show in portrait. It ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the drop zone, progress and check. |
| `title` | `string` | `"Drop in your launch notes"` | Heading above the drop zone. |
| `fileName` | `string` | `"launch-notes.md"` | Name of the dropped file. |
| `fileKind` | `string` | `"MD"` | File type badge, such as MD or PDF. |
| `fileSize` | `string` | `"2.4 MB"` | File size text. |
| `hint` | `string` | `"MD, PDF or ZIP · up to 50 MB"` | Helper text inside the drop zone. |
| `history` | `{ name: string; kind: string; size: string; ago: string }[]` | — | Earlier uploads listed below. Shown in portrait only. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A feature beat about importing a document, with the full drop, progress and success arc.
- A dashboard or docs tool needs a clean upload moment with the file name, type and size visible.
- A portrait cut should also show recent uploads under the active one.

## Don't use when
- Several files go in at once and each resolves in turn — use `multi-file-drop`.
- You need a full dropzone UI with a list of results — use `file-dropzone`.
- Only a progress bar filling is needed with no file — use `progress`.