Component reference
PDFViewer
Read the bundled brand-guidelines document.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { PDFViewer } from "@pimolu/react";
const PDF_SRC = "/demos/documents/pimolu-brand-guidelines.pdf";
export function DemoExample() {
return (
<PDFViewer
src={PDF_SRC}
title="Pimolu brand guidelines"
height={560}
downloadFileName="pimolu-brand-guidelines.pdf"
initialPage={2}
/>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Without the toolbar
The embed can stand alone when the page already provides its own heading and actions.
CSS height
`height` accepts a number of pixels or any CSS length, so a document can follow the viewport.
Custom fallback
When the browser cannot display PDFs inline, the children of the object take over. Replace the default copy with product-specific help.
Usage
The viewer uses the browser PDF capability; keep a direct document link and useful fallback.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluPDFViewerLabels
Type source| Name | Type | Default | Description |
|---|---|---|---|
toolbar | string | undefined | "PDF actions" | Accessible name of the toolbar. Defaults to "PDF actions". |
openInNewTab | string | undefined | "Open in new tab" | Defaults to "Open in new tab". |
download | string | undefined | "Download PDF" | Defaults to "Download PDF". |
fallback | string | undefined | — | Shown inside the object fallback. |
openPdf | string | undefined | "Open the PDF" | Fallback link label. Defaults to "Open the PDF". |
downloadPdf | string | undefined | "Download the PDF" | Fallback download label. Defaults to "Download the PDF". |
toolbarstring | undefinedDefault: "PDF actions"
Accessible name of the toolbar. Defaults to "PDF actions".
openInNewTabstring | undefinedDefault: "Open in new tab"
Defaults to "Open in new tab".
downloadstring | undefinedDefault: "Download PDF"
Defaults to "Download PDF".
fallbackstring | undefinedNo default extracted.
Shown inside the object fallback.
openPdfstring | undefinedDefault: "Open the PDF"
Fallback link label. Defaults to "Open the PDF".
downloadPdfstring | undefinedDefault: "Download the PDF"
Fallback download label. Defaults to "Download the PDF".
PimoluPDFViewerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
srcRequired | string | — | URL of the PDF document. |
titleRequired | string | — | Required: names the document for assistive technology and the toolbar. |
height | string | number | undefined | 480 | Height of the viewer, as a number of pixels or any CSS length. Defaults to 480. |
downloadable | boolean | undefined | true | Show a download action in the toolbar and in the fallback. Defaults to true. |
openInNewTab | boolean | undefined | true | Show an "open in new tab" action in the toolbar. Defaults to true. |
initialPage | number | undefined | — | Page opened through the standard `#page=` PDF fragment. Browsers that support it (Chrome, Edge, Firefox, Safari) honor it; in-page navigation remains the browser's own viewer responsibility. |
showToolbar | boolean | undefined | true | Render the toolbar. Defaults to true. |
downloadFileName | string | undefined | — | Suggested file name for the download link. |
fallback | ReactNode | — | Custom content used when the browser cannot embed the PDF. |
labels | PimoluPDFViewerLabels | undefined | — | Localizable toolbar and fallback copy. |
aria-label | string | undefined | `title` | Accessible name of the embedded document. Defaults to `title`. |
className | string | undefined | — | Class applied to the viewer wrapper. |
onLoad | ReactEventHandler<HTMLObjectElement> | undefined | — | Called when the embedded document loads. |
srcRequiredstringNo default extracted.
URL of the PDF document.
titleRequiredstringNo default extracted.
Required: names the document for assistive technology and the toolbar.
heightstring | number | undefinedDefault: 480
Height of the viewer, as a number of pixels or any CSS length. Defaults to 480.
downloadableboolean | undefinedDefault: true
Show a download action in the toolbar and in the fallback. Defaults to true.
openInNewTabboolean | undefinedDefault: true
Show an "open in new tab" action in the toolbar. Defaults to true.
initialPagenumber | undefinedNo default extracted.
Page opened through the standard `#page=` PDF fragment. Browsers that support it (Chrome, Edge, Firefox, Safari) honor it; in-page navigation remains the browser's own viewer responsibility.
showToolbarboolean | undefinedDefault: true
Render the toolbar. Defaults to true.
downloadFileNamestring | undefinedNo default extracted.
Suggested file name for the download link.
fallbackReactNodeNo default extracted.
Custom content used when the browser cannot embed the PDF.
labelsPimoluPDFViewerLabels | undefinedNo default extracted.
Localizable toolbar and fallback copy.
aria-labelstring | undefinedDefault: `title`
Accessible name of the embedded document. Defaults to `title`.
classNamestring | undefinedNo default extracted.
Class applied to the viewer wrapper.
onLoadReactEventHandler<HTMLObjectElement> | undefinedNo default extracted.
Called when the embedded document loads.
Accessibility
- Tag the source PDF accessibly and provide an HTML alternative for essential information.