PDF Viewer

Display and interact with PDF documents with navigation, zoom, and multiple view modes

Live Demo Active

The PDF Split View is live on the right side of this page. Try collapsing and expanding the preview sidebar!

Full PDF Viewer

Complete viewer with sidebar thumbnails, zoom controls, and navigation

Annual Report 2024.pdf

/ 8

PAGES

Compact Viewer

Minimal viewer for embedded documents

Report.pdf

5 pages

1 / 5

Simple PDF Card

Card-based viewer with page navigation and action buttons

Document Preview

Modal Viewer

Full-screen modal for document signing and review

Click the button below to open the PDF viewer modal

Document Grid

Browse and manage multiple PDF documents

Documents

4 files

Q4 Performance Report.pdf

24 pages • 2.4 MB

Marketing Strategy.pdf

16 pages • 1.8 MB

Product Roadmap.pdf

8 pages • 956 KB

Team Guidelines.pdf

12 pages • 1.2 MB

Preview Card

Rich document preview with metadata and attachments (invoice style)

Preview

INV2398-08-087

Due date

10 November 2023

Subject

Service per June 2023

Billed to

John Smith

john_s@gmail.com

Currency

IDR - Indonesian Rupiah

Description	Qty	Unit Price	Amount
Summer 2K23 T-shirt	1	125,000 IDR	125,000 IDR
Premium Hoodie	2	250,000 IDR	500,000 IDR

Subtotal625,000 IDR

Discount -10%62,500 IDR

Total562,500 IDR

Amount due562,500 IDR

Attachment

Product list.PDF

512kb

Usage

How to use the PDF Viewer components

import {
  PDFViewer,
  PDFViewerCompact,
  PDFViewerModal,
  PDFThumbnailGrid,
  PDFPreviewCard,
  SimplePDFCard,
  PDFSplitView
} from '@/blocks/data-display/pdf-viewer'

// Full viewer with sidebar
<PDFViewer
  title="Document.pdf"
  totalPages={12}
  showThumbnails={true}
  onDownload={handleDownload}
/>

// Compact viewer
<PDFViewerCompact
  fileName="Report.pdf"
  totalPages={5}
/>

// Simple card
<SimplePDFCard
  title="Preview"
  pages={[1, 2, 3]}
  actions={['download', 'print', 'share']}
/>

// Modal viewer
<PDFViewerModal
  isOpen={isOpen}
  onClose={handleClose}
  fileName="Contract.pdf"
  totalPages={8}
  onSign={handleSign}
/>

// Document grid
<PDFThumbnailGrid
  documents={documents}
  onSelect={handleSelect}
  onDownload={handleDownload}
/>

// Preview card (invoice style)
<PDFPreviewCard
  documentId="INV-001"
  metadata={invoiceMetadata}
  items={lineItems}
  subtotal={1000}
  total={900}
/>

// Split view with collapsible right sidebar
<PDFSplitView
  title="New Invoice"
  documentId="INV-001"
  isPreviewOpen={isPreviewOpen}
  onPreviewToggle={() => setPreviewOpen(!isPreviewOpen)}
  previewModes={['PDF', 'Email', 'Payment page']}
  metadata={invoiceMetadata}
  items={lineItems}
  subtotal={1000}
  total={900}
  onSubmit={handleSubmit}
  submitLabel="Send Invoice"
/>

API Reference

PDFViewer Props

title-string - Document title

totalPages-number - Total page count

initialPage-number - Starting page (default: 1)

showThumbnails-boolean - Show sidebar thumbnails

onDownload / onPrint / onShare-() => void - Action callbacks

PDFViewerModal Props

isOpen-boolean - Modal visibility

onClose-() => void - Close handler

fileName-string - Document name

onSign-() => void - Sign button callback

PDFThumbnailGrid Props

documents-PDFDocument[] - Array of documents

onSelect-(doc: PDFDocument) => void - Selection callback

onDownload-(doc: PDFDocument) => void - Download callback

onUpload-() => void - Upload button callback

PDFSplitView Props

title-string - Form title

isPreviewOpen-boolean - Whether preview sidebar is open

onPreviewToggle-() => void - Toggle preview sidebar

previewModes-string[] - Available preview modes (tabs)

metadata / items-Invoice data for preview

onSubmit-() => void - Form submit callback

Features

7 different viewer variants for various use cases
Page navigation with thumbnails
Zoom controls (50% - 200%)
Page rotation support
Grid and list view modes for document browser
Modal viewer for focused reading
Invoice-style preview card with metadata
Split view with collapsible right sidebar preview
Dark mode support
Download, print, and share actions