Folder List

Reorderable folder list with a drag handle, amber folder icon, and an item-count column on the right.

Organize uploads
Brand assets124
Press kit 202638
Product screenshots212
Archive · 202596

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

Import & use
import { Upload27 } from "@/components/beste/piece/upload27";

<Upload27
  heading="Organize uploads"
  folders={[
    {
      "name": "Brand assets",
      "count": 124
    },
    {
      "name": "Press kit 2026",
      "count": 38
    },
    {
      "name": "Product screenshots",
      "count": 212
    },
    {
      "name": "Archive · 2025",
      "count": 96
    }
  ]}
/>

More Upload pieces

View all Upload
brand-guide.pdf4.2 MB
hero-video.mov
logo-dark.svg18 KB
pricing.xlsx2.1 MB

Multi-File Queue

upload13

Stacked upload list with done, uploading, and failed rows each ending in the matching status icon.

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

File Row

upload22

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

brand-guidelines.pdf12.4 MB · 68%

File Upload Card

upload1

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

keynote-rehearsal.mp4Paused · 212 MB left

Upload Paused

upload16

Paused-upload row with an amber Resume button and a static amber progress track matching the state.

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

Archive Bundle

upload30

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

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

Image Row

upload23

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