Import Dropzone Card

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

Import member records

Drop a CSV or browse — we map the fields

members_export_2026.csv72%

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

Import & use
import { Upload32 } from "@/components/beste/piece/upload32";

<Upload32
  title="Import member records"
  hint="Drop a CSV or browse — we map the fields"
  file={{
    "name": "members_export_2026.csv",
    "percent": 72
  }}
/>

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.

Drag files to uploador click to browse your device

Drop Zone

upload2

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

brand-guidelines.pdf12.4 MB · 68%

File Upload Card

upload1

File tile with icon, name, size, and an inline progress bar.

Uploading 24 files9.2 MB/s overall
74%
18Done
3Uploading
3Queued

Batch Summary

upload19

Aggregate upload card with a total-files header, a single sky bar, and a done, uploading, queued tally.

Image Preview
brand-hero.jpg2400 × 1600 · 1.4 MB

Image Preview

upload18

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

team-retreat.mov612 MB
File exceeds 500 MB upload limit

Upload Error

upload15

Failed-upload card with a rose-tinted file row, an alert message in its own box, and a Retry button.