0

Introduction

pdfcn is a set of PDF viewer components that you can copy and paste into your apps, built on embedpdf and shadcn/ui. Open Source. Open Code.

Similar to shadcn/ui, this is not a component library. It is how you build your PDF viewer.

pdfcn takes embedpdf — a headless PDF engine built on PDFium and Web Workers — and gives it a shape you own: composable React components distributed as copy-paste code through the shadcn CLI.

embedpdf already centralizes the hard parts. Rendering, tiling, scrolling, zoom, search, selection, and annotation all live in its plugins. What it deliberately doesn't ship is the chrome: the sidebars, toolbars, loading states, and error states that turn an engine into a viewer. That's the part you always end up rewriting to match your product, so pdfcn hands it to you as source rather than as an API surface.

Philosophy

The components in this registry are built around four key principles:

  • Compose, don't reimplement: pdfcn's chrome is assembled from ordinary shadcn/ui components — Button, ScrollArea, Alert, ToggleGroup, Tooltip. A bookmark sidebar is a ScrollArea full of ghost Buttons, not a bespoke widget that merely resembles one.
  • The engine stays embedpdf's: state and behavior belong to embedpdf's plugin hooks. pdfcn adds a styled shape and a working bootstrap, and otherwise gets out of the way.
  • Open and customizable: you get the component source in your own codebase. Restyle it, restructure it, or delete the parts you don't need.
  • Static composition: embedpdf's plugin registry can't accept plugins after initialization, so <PdfViewer> owns one upfront plugin list. Which chrome you render is your choice; which plugins exist is a single, legible declaration.

Acknowledgments

This project stands on the shoulders of embedpdf and shadcn/ui, along with PDFium and many other open source projects. Thank you to all the maintainers and contributors who make this possible.

FAQ

Next steps

Head to Installation to add the engine bootstrap and your first <PdfViewer>.