PDF Zoom Controls

"use client";

import { PdfToolbar } from "@/components/pdf-toolbar";

About#

Zoom out and zoom in buttons around a dropdown of zoom levels. The dropdown offers three presets — Automatic, Fit page, and Fit width — alongside fixed steps from 50% to 400%. A preset shows its own label; any other level shows as a percentage.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add pdfcn/zoom-controls
Copy

Usage#

Copyimport { PdfZoomControls } from "@/components/pdf-zoom-controls";

Copy<PdfViewer documents={[{ url: "/sample.pdf" }]} className="h-[720px]">
  <PdfToolbar>
    <PdfZoomControls />
  </PdfToolbar>
  <PdfViewerContent />
</PdfViewer>

<PdfZoomControls /> reads the active document from <PdfViewer />, so it works anywhere inside the tree — not only in a <PdfToolbar />.

Set the level a document opens at when you register the zoom plugin in <PdfViewer />:

CopycreatePluginRegistration(ZoomPluginPackage, {
  defaultZoomLevel: ZoomMode.FitWidth,
});

See embedpdf's Zoom plugin for the rest of its options.

Examples#

Default#

"use client";

import { PdfToolbar } from "@/components/pdf-toolbar";

Outside a toolbar#

<PdfZoomControls /> only needs a <PdfViewer /> above it, so it can float over the page as an overlay:

Copy<PdfViewer documents={[{ url: "/sample.pdf" }]} className="h-[720px]">
  <PdfViewerContent />
  <PdfZoomControls className="bg-background absolute bottom-4 left-1/2 -translate-x-1/2 rounded-lg border p-1 shadow-md" />
</PdfViewer>

Accessibility#

The zoom buttons are native <button>s with an aria-label matching their tooltip. The level picker is a <DropdownMenu />, arrow-key navigable with the current level marked. Controls render disabled rather than absent while the document loads, so tab order stays stable.

API Reference#

PdfZoomControls#

A <div> with data-slot="pdf-zoom-controls" wrapping zoom-out and zoom-in buttons around the level dropdown, reading useZoom. Accepts every div prop.