PDF Viewer

Component 13

About

A document viewer that renders a PDF inline with page navigation arrows, a jump-to-page field, zoom steps, fit-to-width, text selection, working links, and a download button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds PDF Viewer to your project and fits it to your theme.

Code

How PDF Viewer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function PdfViewerDemo() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <PdfViewer
        file="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
        className="w-full max-w-2xl"
      />
    </div>
  );
}