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 -
About
PDF rendering is powered by EmbedPDF.
Installation
pnpm dlx shadcn@latest add @extend/pdf-viewer
Useful behaviors
- Zoom, rotate, and download actions.
- PDFium-backed page rendering for long PDFs.
- Optional OCR block overlays, e-signature fields, search highlights, and page overlays.
- Text selection, copy, search, and thumbnail navigation.
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 |
|---|---|---|---|
src | string | - | No |
className | string | - | No |
defaultZoom | number | 1 | No |
showDownload | boolean | true | No |
showToolbar | boolean | true | 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 |