PDF viewerPro
Thumbnails, page jump, zoom, find in document, highlights and a toolbar on selected text to ask about a passage.
On this page
ProA five page refund policy with thumbnails, find, zoom and a saved highlight; select text to ask about it.
Installation
Usage
import { PdfViewer } from "@/components/ui/chatcn/pro/pdf-viewer"
<PdfViewer document={policy} onAsk={(question, { text, page }) => ask(question, text, page)} />Pages render from the text your parser extracted, laid out as the printed page in em units so every zoom is the same page, or from page images you render on the server. No PDF library ships to the browser. Highlights are controlled or uncontrolled; Ask uses the free selection-toolbar. handleRef exposes scrollToPage and scrollToSpan for a parent.
Examples
States
ProOpening, a password protected file, no pages, and a narrow panel at 150% on page 4.
Props
| Prop | Type | Notes |
|---|---|---|
document | { title, filename?, pages } | Pages have blocks (text) or an image |
page, defaultPage, onPageChange | number | Follows scrolling |
zoom, defaultZoom, onZoomChange | number | "fit" | 1 is 100%. Default fit |
spans, activeSpanId, onSpanClick | PdfSpan[] | Cited passages by quote or rects |
highlights, defaultHighlights, onHighlightsChange | PdfHighlight[] | { id, page, quote } |
onAsk | (question, { text, page }) => void | Adds Ask to the selection toolbar |
loading, error, onRetry | Opening and failure states | |
handleRef | Ref<PdfViewerHandle> | Imperative jumps |
Keyboard
| Key | Action |
|---|---|
| Ctrl or Cmd F | Find in document |
| Enter, Shift Enter | Next and previous result |
| Escape in find | Clear the search |
| Page Up, Page Down, arrows | Scroll the pages |
| Tab after selecting text | Moves into the selection toolbar |
Accessibility
- Pages are labeled groups; thumbnails are buttons named Page 3, with the count of marks on it.
- The result count is a polite live region. No results is said in words.
- Search and page inputs have labels; the zoom button names the current zoom.
Motion
Thumbnail and highlight jumps scroll smoothly; find and page entry jump instantly. Zoom keeps your reading position. Reduced motion makes every scroll instant.