- PDF Viewer
- PDF Toolbar
- PDF More Actions Menu
- PDF Floating Toolbar
- PDF Document Tabs
- PDF View
- PDF Document Grid
- PDF Document Info
- PDF Page Navigation
- PDF Zoom Controls
- PDF Undo/Redo Buttons
- PDF Keyboard Shortcuts
- PDF Bookmark Sidebar
- PDF Thumbnail Sidebar
- PDF Search Panel
- PDF Attachment List
- PDF Annotation Layer
- PDF Annotation Toolbar
- PDF Annotation Inspector
- PDF Annotation Selection Menu
- PDF Annotation Sidebar
- PDF Comment
- PDF Comment Draft
- PDF Comment Button
- PDF Comment Sidebar
- PDF Redaction Toolbar
- PDF Capture Button
- PDF Form Fill Toggle
- PDF Signature Button
- PDF Stamp Button
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 aScrollAreafull of ghostButtons, 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>.