File Upload Card

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

brand-guidelines.pdf12.4 MB · 68%

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

Import & use

import { Upload1 } from "@/components/beste/piece/upload1";

<Upload1
  filename="brand-guidelines.pdf"
  size="12.4 MB"
  progress={68}
/>

More Upload pieces

campaign-edit-01.mov184 MB of 312 MB · 12.4 MB/s

59%10s left

upload12

Single-file upload row with size counter, live speed, pause and cancel controls, and a gradient bar.

Uploading 24 files9.2 MB/s overall

74%

18Done

3Uploading

3Queued

upload19

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

2026-msa-final.pdf2.1 MB · Edited 2 hours ago

upload22

File manager row with a rose PDF tile, metadata line, owner avatar, and a more-actions button.

project-handoff.zip42 files · 248 MBCompressed from 612 MB · 59% smaller

upload30

Zip bundle card with an amber archive tile, file count, compressed savings line, and a Download button.

brand-hero.jpg2400 × 1600 · 1.4 MB

upload23

Compact image file row with a square warm gradient preview and a filename plus dimensions line.

+20

Recent uploads24 items

upload20

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