PDF Viewer

Renders a PDF with search, a thumbnail sidebar, zoom controls, and download.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/pdf-viewer.json

Dependencies

PdfViewer is built on react-pdf (which wraps pdf.js). The pdf.js worker is loaded from a CDN by default — no bundler config required.

npm packages

react-pdf — Renders PDF pages as canvas + text layers.

Usage

Import the component and pass any PDF URL.

TSImport

import { PdfViewer } from "@/components/ui/pdf-viewer";

TSExample

import { PdfViewer } from "@/components/ui/pdf-viewer";

export function Example() {
  return (
    <PdfViewer
      fileUrl="https://example.com/document.pdf"
      height="auto"
    />
  );
}

Composition

Anatomy of the PdfViewer.

PdfViewer                          (single component — built on react-pdf)
├── fileUrl="…"                    (any direct PDF URL)
├── height={number | string | "auto"}   ("auto" sizes to the document)
└── className="…"                  (extends the outer container)

Built-in chrome:
  • Toolbar — full-text search, zoom in / out, download
  • Sidebar — clickable thumbnails for every page (click to scroll)
  • Scroll surface — continuous page list, highlights search matches

Default

Continuous scroll of all pages with a thumbnail sidebar, full-text search, zoom in/out, and download.

Custom URL

Paste any direct PDF URL into the field — the viewer reloads with the new document.

PDF URL

In a modal

Drop the viewer inside a Dialog/Modal so the document opens in an overlay without leaving the current page.

API Reference

Props exposed by the PdfViewer component.

Prop	Type	Default	Description
`fileUrl`	string	—	Direct URL to the PDF file to render.
`height`	number \| string \| "auto"	640	Height of the viewer surface. Numbers are treated as px. Pass "auto" to size the container to the document — the page list grows naturally and the sidebar sticks to the top as you scroll.
`className`	string	—	Extends the outer container classes.