File System (Finder)

Component 152

About

A macOS Finder-style file browser for flat object-store manifests (S3 / R2). Derives a folder hierarchy from object keys and switches between icon, list, column and gallery views, with Finder-style keyboard navigation. Thumbnails, URLs and signing stay external.

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

Code

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

Usage.tsx

"use client";

import { FileSystem, type FileSystemItem } from "@/components/ui/file-system";

// Flat manifest — maps 1:1 from an S3 / R2 ListObjectsV2 response.
// Folders are key prefixes; files are objects. Thumbnails, URLs and signing
// are external concerns, so files without a previewImageUrl fall back to a
// generic type tile (this standalone build ships without the document viewers).
const items: FileSystemItem[] = [
  { kind: "folder", path: "aurora/" },
  { kind: "folder", path: "images/" },
  { kind: "folder", path: "reports/" },
  {
    kind: "file",
    path: "bank-statement.pdf",
    contentType: "application/pdf",
    size: 482193,
    updatedAt: "2026-06-09T18:21:00.000Z",
  },
  {
    kind: "file",
    path: "crazy-chart-zoo.xlsx",
    contentType:
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    size: 91204,
    previewAspectRatio: 1.6,
    updatedAt: "2026-05-22T12:05:00.000Z",
  },
  {
    kind: "file",
    path: "demo.docx",
    contentType:
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    size: 38112,
    updatedAt: "2026-04-18T09:14:00.000Z",
  },
  {
    kind: "file",
    path: "social-card.png",
    contentType: "image/png",
    size: 210433,
    previewAspectRatio: 1.6,
    updatedAt: "2026-06-01T15:30:00.000Z",
  },
];

export default function Default() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="h-[34rem] w-full max-w-3xl overflow-hidden rounded-xl border border-border bg-background shadow-sm">
        <FileSystem items={items} title="Documents" className="h-full" />
      </div>
    </div>
  );
}