Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/extend-hq/file-system"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>
);
}