For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
/
0
Sponsor

Installation

PreviousNext

Install PDF components, blocks, and themes from the registry.

Prerequisites

A React project that can run either Takumi or Forme.

Installation

Run the following command to add a Takumi component:

$ pnpm dlx shadcn@latest add @pdfcn/takumi/text

Forme components use the forme/ namespace:

$ pnpm dlx shadcn@latest add @pdfcn/forme/text

The registry installs the matching renderer dependencies and the shared theme utilities required by the selected component.

Usage

Import the installed component and use it inside your renderer's document primitives:

import { Document, Page } from "@/components/pdf/pdfcn-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>
  );
}

For Forme, use Document and Page from @formepdf/react; the installed pdfcn component API stays the same.

Install a Block

Blocks are complete document templates composed from registry components:

$ pnpm dlx shadcn@latest add @pdfcn/takumi/invoice-minimal

Use the forme/ namespace for the equivalent Forme document:

$ pnpm dlx shadcn@latest add @pdfcn/forme/invoice-minimal

Install a Theme

pdfcn ships theme presets that integrate with PdfcnThemeProvider:

$ pnpm dlx shadcn@latest add @pdfcn/takumi/theme-minimal

For Forme:

$ pnpm dlx shadcn@latest add @pdfcn/forme/theme-minimal