FileViewerThumbnails

Use thumbnail navigation inside FileViewerSidebar when the file renderer has page-like units. PDF exposes this through PdfViewerThumbnails; other page renderers should follow the same sidebar contract.

Copy<FileViewerProvider source={source} defaultSidebarOpen>
  <FileViewer>
    <PdfViewerProvider>
      <FileViewerHeader>
          <FileViewerSidebarTrigger />
          <FileViewerTitle />
          <FileViewerControls />
      </FileViewerHeader>
      <FileViewerContent>
        <FileViewerSidebar aria-label="PDF pages">
          <PdfViewerThumbnails />
        </FileViewerSidebar>
        <FileViewerInset>
          <FileViewerViewport>
            <PdfViewerPages />
          </FileViewerViewport>
        </FileViewerInset>
      </FileViewerContent>
    </PdfViewerProvider>
  </FileViewer>
</FileViewerProvider>

Behavior

• The sidebar owns placement; the renderer-owned thumbnail component owns page rendering, current-page highlight, and page selection.
• PdfViewerThumbnails is provider-bound: inside PdfViewerProvider it reads the resource, current page, and page-jump command automatically, so it takes no wiring props.
• Only thumbnails near the rail viewport render images; the rest stay as sized placeholders, so a long document does not rasterize every page at once.
• When page state is owned outside the provider, drop down to the controlled FileViewerPageRail (PdfThumbnailRail) instead.

API Reference

PdfViewerThumbnails — the provider-bound adapter:

Source

"use client";

import * as React from "react";

import { clearPdfDocumentResource } from "@/lib/pdf-document-resource";
import { cn } from "@/lib/utils";
import type { ViewerResource } from "@/lib/viewer-resource";
import { Spinner } from "@/components/ui/spinner";

import {
  buildPdfThumbnailLayout,
  PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT,