Document Viewer

In-app document preview supporting PDF, images, and other file types.

Preview · Document Viewer

Code

HTML · @primus/ui-core
React
Angular

<div class="card" style="max-width:360px;padding:0">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;border-bottom:1px solid var(--border)">
    <div><p style="margin:0;font-weight:600;font-size:0.875rem">Invoice_Q1_2026.pdf</p><p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">PDF · 1.2 MB</p></div>
    <div class="hstack"><button class="outline small">Download</button><button class="ghost small">✕</button></div>
  </div>
  <div style="background:var(--muted);height:140px;display:flex;align-items:center;justify-content:center;color:var(--muted-foreground);font-size:0.875rem">PDF Preview Area</div>
</div>

import { DocumentViewer } from 'primus-react-ui';

<DocumentViewer
  document={{ id: 'doc-1', name: 'Invoice_Q1_2026.pdf', type: 'pdf', url: '/docs/invoice.pdf' }}
  onClose={() => setViewerOpen(false)}
  onDownload={() => downloadFile('invoice.pdf')}
/>

<primus-document-viewer [document]="selectedDoc"
  (onClose)="closeViewer()" (onDownload)="downloadDoc()">
</primus-document-viewer>

Props

Prop	Type	Default	Description
`document`	`Document`	required	`{id,name,type,url}`
`onClose`	`()=>void`	—	Close handler

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props