Drag Over State

Highlighted drop surface tinted sky with a pulsing wash, download chip, and release-to-upload cue.

Drop to uploadRelease anywhere in this area

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Upload4 } from "@/components/beste/piece/upload4";

<Upload4
  title="Drop to upload"
  subtitle="Release anywhere in this area"
/>

More Upload pieces

Drag files to uploador click to browse your device

upload2

Dashed upload surface centered on a cloud icon, with headline, subtitle, and a select button.

Q2-forecast-final.xlsx2.1 MB · Uploaded 2 seconds ago

upload14

Success confirmation row with an emerald border, corner check overlay on the file tile, and an Open button.

raw-footage-reel.mp458%

Chunked upload · 16 MB parts9 / 16 done

upload17

Parallel chunk uploader visualizing 16 part tiles tinted by done, uploading, or pending states.

brand-hero.jpg2400 × 1600 · 1.4 MB

upload18

Uploaded-image card with a dashed crop overlay on a gradient placeholder and rotate, crop, delete tools below.

Paste an image from your clipboardScreenshot, copy, and press the shortcut to drop it here.

⌘+V

upload11

Dashed panel encouraging a paste gesture, with a tinted clipboard tile and ⌘V hint chip.

Attach supporting documents

upload3

Single-line upload affordance with a paperclip icon, prompt copy, and a trailing browse button.