Stacked Cards Upload Demo

Installation

Usage

import { StackedCardsUpload } from "@/components/ruixen/stacked-cards-upload";
 
const uploadFiles = [
  {
    id: "1",
    file: new File([""], "document.pdf", { type: "application/pdf" }),
    progress: 75,
    status: "uploading" as const,
  },
];
 
export default function App() {
  const handleRemove = (id: string) => {
    console.log("Remove file:", id);
  };
 
  return <StackedCardsUpload files={uploadFiles} onRemove={handleRemove} />;
}

Props

Prop	Type	Default	Description
`files`	`UploadFile[]`	-	Array of files to display
`onRemove`	`(id: string) => void`	-	Callback when file is removed

Features

Stacked Layout: Cards stack with proper z-index layering
Progress Indicators: Visual progress bars for uploads
Status Management: Upload and done states
Remove Action: Delete files with trash icon
Smooth Animations: Enter/exit animations
Responsive Design: Works on all screen sizes

File Type

export type UploadFile = {
  id: string;
  file: File;
  progress: number;
  status: "uploading" | "done";
};