pdfcn: Copy-paste PDF Components Built on Takumi and Forme

pdfcn is a PDF component registry that adds reusable document components, blocks, and themes for Takumi and Forme.

It provides a shadcn-style workflow for assembling invoices, reports, forms, tables, charts, and other generated documents from editable source files inside your project.

Features

• Generates PDFs through either Takumi or Forme.
• Uses matching public component props across both rendering bases.
• Applies reusable document styling.
• Composes document layouts from focused PDF components.
• Ready-made invoice and report blocks.
• Handles document-specific elements such as page headers, page numbers, page breaks, tables, graphs, QR codes, signatures, and watermarks.

Use Cases

• Generate invoices with reusable headers, line-item tables, totals, contact details, signatures, and branded document styling.
• Build financial, marketing, operations, and security reports from prebuilt report structures.
• Create data-heavy PDFs with tables, key-value sections, bar or line charts, page numbering, and repeated headers or footers.
• Keep recurring business documents visually consistent through shared theme presets and local theme definitions.

How To Use It

Install a PDF Component

For Takumi:

npx shadcn@latest add @pdfcn/takumi/text

For Forme:

npx shadcn@latest add @pdfcn/forme/text

Basic Usage with Takumi

A Takumi document uses the installed PDF primitives, PdfcnThemeProvider, and individual document components:

import { Document, Page } from "@/components/pdf/pdf-primitives";
import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import { Text } from "@/components/pdf/text";
export function Invoice() {
  return (
    <Document>
      <Page size="A4">
        <PdfcnThemeProvider>
          <Text variant="title">Invoice</Text>
        </PdfcnThemeProvider>
      </Page>
    </Document>
  );
}

Add a Complete Invoice or Report

Blocks combine multiple pdfcn components into complete document templates. Install the Takumi Minimal Invoice block with:

npx shadcn@latest add @pdfcn/takumi/invoice-minimal

Use the corresponding Forme registry path for the Forme implementation:

npx shadcn@latest add @pdfcn/forme/invoice-minimal

Add a Theme

Theme registry entries install reusable theme definitions for PdfcnThemeProvider.

npx shadcn@latest add @pdfcn/theme-minimal

Apply the installed theme at the document level:

import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import { minimalTheme } from "@/lib/pdf-themes/minimal";
export function Invoice() {
  return (
    <PdfcnThemeProvider theme={minimalTheme}>
      {/* PDF content */}
    </PdfcnThemeProvider>
  );
}

Available PDF Components

Invoice and Report Blocks

Alternatives and Related Resources

• Copy-Paste PDF Components for React – PDFx
  Another copy-paste React PDF component system, built around @react-pdf/renderer, with reusable components and theme configuration.
• Display PDF In React Application – react-pdf
  A related React resource for displaying existing PDF documents inside web applications.
• React Components For PDF Annotation – react-pdf-highlighter
  A PDF.js-based React library for text and rectangular annotations when the application needs document review rather than PDF generation.

FAQs

Q: Can I create a custom pdfcn theme?
A: Yes. Define a theme with the PdfcnTheme interface and pass it to PdfcnThemeProvider. Theme primitives control typography, spacing, font weights, line heights, and border radius values.

Q: Do I need Takumi and Forme installed at the same time?
A: No. Pick one renderer for the project. Takumi components import from local pdf-primitives files, Forme components import Document and Page from @formepdf/react.

Q: Why does npx shadcn add @pdfcn/takumi/text fail with an unknown registry error?
A: The @pdfcn alias needs a registries entry in components.json first. Use the full https://pdfcn.dev/r/takumi/text.json URL as a workaround if you don’t want to add the alias.

Q: Where do installed blocks go in my project?
A: Components install into components/ui/. Blocks install into whatever blocks directory your components.json configures.