File Card Collections

Cards 1K

About

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

Code

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

Usage.tsx

import { FileCard } from "@/components/ui/file-card-collections";

const formats = [
  "txt", "doc", "pdf", "md", "mdx", "xls", "csv", "zip",
  "tar", "ppt", "pptx", "json", "css", "code", "png", "jpg", "img", "video",
] as const;

export default function Playground() {
  return (
    <div className="bg-background text-foreground flex min-h-screen items-center justify-center">
      <div className="flex max-w-xl flex-wrap justify-center gap-6 px-6">
        {formats.map((format) => (
          <FileCard key={format} formatFile={format} />
        ))}
      </div>
    </div>
  );
}