PDF Document Info

About#

<PdfDocumentInfo /> lists a document's PDF properties — file name, title, author, subject, keywords, dates, creator, producer, and page count — read straight from the engine's getMetadata() and the loaded document. It's the shared body of both the document properties dialog and the library browser block's information sidebar, so the two never drift apart.

• Follows the viewer — with no props it describes the ambient viewer document (the focused view's active document), so it tracks whatever the viewer is showing. Pass documentId to pin it to a specific document.
• Grouped, not listed — properties sit in four ruled sections (File, Description, Origin, Format) with a fixed label column, laid out like <PdfAnnotationInspector /> because it's the same kind of surface. Thirteen flat rows are read; four labelled groups are scanned.
• Honest fallbacks — file size, PDF version, and Fast Web View aren't tracked once a document is open, so those render N/A, matching PDFSlick's own fallback for the fields it can't populate either. Empty metadata fields render an em dash.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add pdfcn/document-info
Copy

Usage#

Copy<PdfViewer documents={[{ url: "/sample.pdf" }]} className="h-[720px]">
  <div className="flex h-full min-h-0">
    <PdfViewerContent />
    <aside className="w-80 border-l p-4">
      <PdfDocumentInfo />
    </aside>
  </div>
</PdfViewer>

The component brings no horizontal padding of its own, so the section rules run to the edges of whatever it's dropped into. Both of its own hosts — the properties dialog and the library browser's sidebar — pad already; a bare panel should pass px-4.

Examples#

In a dialog#

<PdfDocumentPropertiesDialog /> is this panel in a dialog, with a trigger already wired. Reach for it before building the same thing:

Copy<PdfToolbar>
  <PdfPageNavigation />
  <div className="ml-auto flex items-center gap-1">
    <PdfDocumentPropertiesDialog />
  </div>
</PdfToolbar>

Describing a document other than the open one#

documentId pins the panel to one document, which is how a browsing layout inspects a card without opening it. The library browser does exactly this — a grid of documents beside a sidebar describing the selected one:

Copy<aside className="w-80 border-l px-4 py-2">
  <PdfDocumentInfo documentId={selectedId} />
</aside>

Every open document has plugin state whether or not it's the one on screen, so the panel resolves without the document being visible anywhere.

Accessibility#

Each property is a <dt>/<dd> pair inside a <dl>, one <dl> per section, so a screen reader reads a label with its value rather than a row of loose text. Sections are <section> elements with their own heading, making the four groups navigable as landmarks.

Values truncate visually but carry their full text on title, so nothing is lost to the fixed label column. While the metadata resolves, the panel renders a skeleton shaped like the sections it stands in for — the layout doesn't shift when the values arrive.

API Reference#

PdfDocumentInfo#

A <div> carrying data-slot="pdf-document-info". Accepts every prop a <div> takes, plus:

Styling the sections#

Each row is a <dt>/<dd> pair on one line, the label column fixed wide enough for the longest label the panel owns so values line up down the whole panel rather than stepping in and out section by section. Values truncate with the full text on title.