The React PDF Viewer is the core page-based document surface for document-heavy apps. It supports dense PDFs, scanned documents, selectable text, thumbnails, uploads, and page-level navigation.
Page 1 of -
Installation
pnpm dlx shadcn@latest add @extend/pdf-viewer
Self-host PDF.js assets
The viewer uses version-matched PDF.js CMaps and standard fonts from unpkg by
default so PDFs with CID fonts can render without extra setup. To avoid external
asset requests, copy pdfjs-dist/cmaps and pdfjs-dist/standard_fonts into
your public assets and pass documentOptions.
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.
| Prop | Type | Default | Required |
|---|---|---|---|
file | string | - | No |
className | string | - | No |
documentOptions | ReactPdf.DocumentProps["options"] | CDN | No |
defaultThumbnailSidebarOpen | boolean | false | No |
defaultZoom | number | 0.75 | No |
pageWidth | number | 612 | No |
pageHeight | number | 792 | No |
pageNumbers | number[] | - | No |
pageRenderBuffer | number | 4 | No |
setRenderRange | (visiblePagesRange: PDFViewerVisiblePagesRange) => PDFViewerRenderRange | - | No |
showRotateControls | boolean | true | No |
showUpload | boolean | true | No |
toolbarActions | React.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 |