pdfcn

Overview

pdfcn is an open-source, customizable PDF component library for React by shadcn-labs. Following the renowned shadcn copy-and-paste philosophy, pdfcn transforms PDF document creation from a cumbersome chore into a familiar component-driven workflow. Built on top of Takumi and Forme, it empowers engineers to design, customize, and ship production-ready PDF reports, invoices, and certificates with zero vendor lock-in.

Key Features

• Dual Rendering Engines: Full support for both Takumi and Forme, providing consistent top-level React component APIs while retaining direct access to raw primitives.
• Copy & Paste Architecture: Powered by the shadcn registry format. Run a single CLI command to install clean, accessible components directly into your codebase.
• Pre-built Design Themes: Ships with curated typographic and color palettes (Professional, Modern, Minimal, Executive, Corporate, Blueprint) and an interactive theme builder.
• Production Blocks & Components: Ready-to-use business documents including commercial invoices, financial summaries, data tables, and signature blocks.

Installation & Quick Start

# Add a Takumi component via shadcn CLI
pnpm dlx shadcn@latest add @pdfcn/takumi/alert

# Or add a complete pre-built corporate invoice block (Forme engine)
pnpm dlx shadcn@latest add @pdfcn/forme/invoice-corporate

import { Document, Page } from "@/components/pdf/pdf-primitives";
import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import { Text } from "@/components/pdf/text";
import { Card } from "@/components/pdf/card";
import { Badge } from "@/components/pdf/badge";

export function InvoiceDocument() {
  return (
    <Document>
      <Page size="A4">
        <PdfcnThemeProvider theme="modern">
          <Card className="p-6">
            <Badge variant="success">Paid</Badge>
            <Text variant="h1" className="mt-4">Invoice #INV-2026-001</Text>
            <Text variant="muted">Thank you for your business. Summary of charges below.</Text>
          </Card>
        </PdfcnThemeProvider>
      </Page>
    </Document>
  );
}

Why Choose pdfcn?

1. Developer Velocity: Generate polished PDF documents using the exact same declarative styling and component mental models you use across modern React applications.
2. Total Code Ownership: Modify layout, typography, or styling rules directly without framework constraints or proprietary subscription traps.