## Doc Viewer (S—253)

A compact document viewer: page thumbnails, page-by-page navigation, zoom steps and fit-width, with a page jump field.

- URL: https://sundaeui.dev/components/doc-viewer
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/doc-viewer.json`
- Tags: pages, viewer, document, zoom, pdf, thumbnails

Thumbnails on the side mark the current page and jump on click. Arrows and the page field move through the document; zoom steps or fit to width.
Pages are placeholders drawn with CSS here; pass rendered PDF pages or images as children of each page.

### Usage

```tsx
import { DocViewer } from '@/components/sundae/doc-viewer'

<DocViewer />
```

### Props

- `pages` (`ReactNode[]`, required): Rendered pages.
- `title` (`string`): File name.
- `defaultZoom` (`number`, default `100`): Zoom percent.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Contracts, invoices, uploaded files.

### When not to use

- Long-form reading: render as HTML.

### Accessibility

- Thumbnails are a list of buttons with aria-current on the visible page.
- Page field is a labelled number input; zoom buttons announce the level.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next page
- + / −: Zoom