PDF Viewer renders PDF documents with an optional header toolbar across desktop, tablet, and mobile breakpoints with RTL support.
Loading demo: pdf-viewer-real-world
npx sdaia-ui@latest add pdf-viewer
import { PDFViewer } from "@/components/ui/pdf-viewer"<PDFViewer src="..." pdfHeader={true} breakpoint="desktop" />Full-featured PDF viewer for desktop screens.
Loading demo: pdf-viewer-desktop
PDF viewer with the document header panel visible.
Loading demo: pdf-viewer-with-header
Props for the MediaViewer component.
Prop | Type | Default | Required |
|---|---|---|---|
breakpoint | 'desktop' | 'tablet' | 'mobile' | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
showHeader | boolean | — | optional |
headerTitle | ReactNode | — | optional |
headerSubtitle | ReactNode | — | optional |
infoItems | PdfViewerInfoItem[] | — | optional |
showCloseButton | boolean | — | optional |
onClose | () => void | — | optional |
closeLabel | string | — | optional |
showPrimaryAction | boolean | — | optional |
primaryActionLabel | ReactNode | — | optional |
onPrimaryAction | () => void | — | optional |
showZoomControls | boolean | — | optional |
zoom | number | — | optional |
defaultZoom | number | — | optional |
minZoom | number | — | optional |
maxZoom | number | — | optional |
zoomStep | number | — | optional |
onZoomChange | (zoom: number) => void | — | optional |
zoomLabel | ReactNode | — | optional |
onZoomOut | () => void | — | optional |
onZoomIn | () => void | — | optional |
onZoomFit | () => void | — | optional |
onZoomMenu | () => void | — | optional |
children | ReactNode | — | optional |