Drop Zone

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

Drag files to uploador click to browse your device

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

Import & use
import { Upload2 } from "@/components/beste/piece/upload2";

<Upload2
  title="Drag files to upload"
  subtitle="or click to browse your device"
  action="Select files"
/>

More Upload pieces

View all Upload
Upload artwork
PNGJPGSVGWebP
Up to 10 MB

Formats Drop Zone

upload8

Upload prompt that lists accepted formats as mono pills beside a size-limit caption.

Import member records

Drop a CSV or browse — we map the fields

members_export_2026.csv72%

Import Dropzone Card

upload32

A dashed dropzone with an upload chip and hint, over a single file row with a live progress bar.

Drop to uploadRelease anywhere in this area

Drag Over State

upload4

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

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

Upload Complete

upload14

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

+20
Recent uploads24 items

Upload Stack

upload20

Compact upload summary with four overlapping thumbnails, a +N overflow tile, and a total item count.

Attach supporting documents

Compact Attach

upload3

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