File Card

Component

About

A file preview component shown as a row (for lists) or a tile (for grids), with an icon based on the file type or an image preview, plus the file name, size, and custom action buttons like download or remove.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds File Card to your project and fits it to your theme.

Code

How File Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from "react";
import { Download, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FileCard } from "@/components/ui/file-card";

export default function FileCardDemo() {
  const [files, setFiles] = useState([
    { name: "quarterly-report.pdf", size: 1864320, type: "application/pdf" },
    { name: "team-photo.png", size: 2457600, type: "image/png" },
    { name: "budget.xlsx", size: 48210, type: "application/vnd.ms-excel" },
  ]);

  return (
    <div className="flex w-full max-w-md flex-col gap-2 p-4">
      {files.map((file) => (
        <FileCard
          key={file.name}
          name={file.name}
          size={file.size}
          type={file.type}
          actions={
            <>
              <Button variant="ghost" size="icon" aria-label="Download">
                <Download />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                aria-label="Remove"
                onClick={() =>
                  setFiles((prev) => prev.filter((f) => f.name !== file.name))
                }
              >
                <X />
              </Button>
            </>
          }
        />
      ))}
    </div>
  );
}