Document viewer

Page sheets with the cited passage highlighted, a rule in the margin and page navigation that follows your scroll.

Markdown

On this page

Citations in an answer drive a document panel: page, highlight and scroll follow the click.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/document-viewer.json

Usage

tsx

import { DocumentViewer } from "@/components/ui/chatcn/document-viewer"

<DocumentViewer
  document={doc}
  highlight={{ page: 4, quote: "Ticket rate fell from 4.1 percent" }}
  onClose={closePanel}
/>

Give it a height (a panel, a dialog or h-full): the pages scroll inside. Changing highlight scrolls the new passage to the middle of the view.

Examples

Loading and error

Page skeletons while text loads, and a file that went missing.

Props

Prop	Type	Notes
`document`	`DocumentSource`	Pages are `{ number, text }`, with blank lines between paragraphs
`highlight`	`{ page, quote }`	Matched case-insensitively within one paragraph
`page`, `defaultPage`, `onPageChange`		Controlled or uncontrolled page
`loading`	`boolean`	Page skeletons
`error`, `onRetry`		Error state with Retry
`onClose`	`() => void`	Close button in the header
`renderTitle`	`(title) => ReactNode`	Wrap the title, for example in a dialog title

Keyboard

Key	Action
`Tab`	Previous and next page, Open original, Close, then the pages
`ArrowLeft`, `ArrowRight` on the pages	Previous and next page, instantly (mirrored in RTL)
`PageUp`, `PageDown`, `Home`, `End`	Native scrolling

Accessibility

Each sheet is a section labelled Page 4. The page counter is a polite live region.
The cited passage is a mark, and its paragraph is also set in a stronger color, so it stands out without relying on the fill alone.
The scroll area is focusable so keyboard users can page and scroll.

Motion

The first highlight is placed instantly. Later highlights and page buttons scroll smoothly with a pointer, instantly from the keyboard or under reduced motion.