Media Library

When to use

Reach for MediaLibrary when you need a Google-Drive-style asset manager — folders + files, lazy loading, drag-drop upload, drag-to-move, right-click menus, and rich multi-type preview. It composes the shipped viewers (pdf-viewer, code-block, markdown-editor, video-player) and a folder file-tree — you supply the data + the backend callbacks.

Full (batteries-included)

import { MediaLibrary } from "@/components/media-library"

export function Example() {
  return (
    <MediaLibrary
      nodes={tree}
      storage={{ used: 12.8e9, total: 50e9 }}
      onLoadChildren={(folderId) => fetchFolder(folderId)}
      onUpload={(files, folderId, progress) => uploadToCdn(files, folderId, progress)}
      onMove={(ids, target) => moveAssets(ids, target)}
      onRename={(id, name) => renameAsset(id, name)}
      onDelete={(ids) => deleteAssets(ids)}
      onCreateFolder={(parentId, name) => createFolder(parentId, name)}
    />
  )
}

Lighter (drop the parts you don't need)

Like shadcn's sidebar, every part is an export. Compose <MediaLibraryRoot> with only the pieces you want — omitting <MediaLibraryLightbox /> / <MediaLibraryDetailsPane /> also tree-shakes the heavy viewers (pdf.js / CodeMirror / marked) out of your bundle.

import {
  MediaLibraryRoot,
  MediaLibraryBreadcrumbs,
  MediaLibraryFolderRow,
  MediaLibraryFileGrid,
} from "@/components/media-library"

<MediaLibraryRoot nodes={tree} onMove={moveAssets} preview={false}>
  <MediaLibraryBreadcrumbs />
  <MediaLibraryFolderRow />
  <MediaLibraryFileGrid />
</MediaLibraryRoot>

Just the preview

import { FilePreview } from "@/components/media-library"

// Anywhere — no library shell. Routes by MIME/extension to the right viewer.
<FilePreview node={{ id: "1", name: "readme.md", type: "file",
  mimeType: "text/markdown", url: "/files/readme.md" }} />

Notes

• Data: nodes are MediaNode (a superset of the shared FsNode) — give files a url + mimeType for preview, and width/height for the dimension badge.
• Text preview(code / JSON / txt / Markdown) is fetched from the node's url; pass resolveTextContent for auth / signed URLs.
• Capabilities are opt-in: omit onUpload / onMove / onDelete / onRename / onCreateFolder and the matching buttons, menu items, and dnd disappear (read-only gallery).
• Uploads call onUploadonce per file; report that file's percent via the progress callback and resolve with the real MediaNode[].
• Cut → paste-into-folder moves items; copy/duplicate is deferred to v0.2.