2

PDF Viewer

PreviousNext

Render PDFs with page controls, zoom, search, text selection, and responsive layout support.

The PDF Viewer is the core page-based document surface. It should support dense documents, scanned documents, selectable text, and page-level navigation.

Page 1 of -
"use client";

import { PDFViewer } from "@/components/ui/pdf-viewer";

export function PdfViewerExample() {
  return (
    <PDFViewer
      file="/path/to/document.pdf"
      className="h-[640px]"
      defaultThumbnailSidebarOpen={false}

Installation

pnpm dlx shadcn@latest add http://localhost:4000/r/pdf-viewer.json

Useful behaviors

  • Zoom, fit width, fit page, rotate, and print/download actions.
  • Virtualized page rendering for long PDFs.
  • Optional OCR block overlays, e-signature fields, search highlights, and annotation layer.
  • Text layer support for selection, copy, search, and accessibility.

API Reference

PDFViewer

The PDFViewer component renders a scrollable PDF surface with toolbar controls, lazy page rendering, uploads, and page-level extension hooks.

PropTypeDefaultRequired
filestring-No
classNamestring-No
defaultThumbnailSidebarOpenbooleantrueNo
defaultZoomnumber0.75No
pageWidthnumber612No
pageHeightnumber792No
pageNumbersnumber[]-No
pageRenderBuffernumber2No
showRotateControlsbooleantrueNo
showUploadbooleantrueNo
toolbarActionsReact.ReactNode-No
pageClassName(pageNumber: number) => string | undefined-No
renderPageOverlay(props: PDFViewerPageOverlayProps) => React.ReactNode-No
onActivePageChange(pageNumber: number) => void-No
onDocumentLoadSuccess(numPages: number) => void-No
onPdfUpload(file: File) => void-No
onPagePointerDown(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void-No
onPagePointerMove(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void-No
onPagePointerUp(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void-No
onPagePointerCancel(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void-No