Upload Stack

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

+20

Recent uploads24 items

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

Import & use

import { Upload20 } from "@/components/beste/piece/upload20";

<Upload20
  thumbs={[
    "https://images.unsplash.com/photo-1774275987532-4abf5c59c887?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fHw%3D",
    "https://images.unsplash.com/photo-1774275985337-0be016f154d5?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D",
    "https://images.unsplash.com/photo-1774275987947-10827121ea45?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D",
    "https://images.unsplash.com/photo-1648597628449-b5c9a2786707?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHx8"
  ]}
  total={24}
  label="Recent uploads"
/>