项目概述

pdfcn 是由 shadcn-labs 打造并维护的开源 React PDF 组件库，遵循 shadcn 广受好评的“所有权代码（Copy & Paste）”理念。它彻底打破了传统 PDF 生成中繁琐、硬编码、割裂的原生排版方案，基于 Takumi 与 Forme 两大现代化 PDF 渲染引擎构建，让开发者能够像搭建常规 Web UI 一样，利用声明式的 React 组件和统一的设计系统生成高品质的 PDF 文档。

核心特性

⚡️ 双渲染底座支持：无缝适配 Takumi 与 Forme 两大主流 PDF 渲染引擎，既保持统一的高层组件 API，又允许随时下沉调用底层原生排版能力。
📦 零配置开箱即用：遵循 shadcn Registry 规范，通过 CLI 单命令按需复制组件源码到项目本地，无黑盒依赖，拥有 100% 的代码控制权。
🎨 主题化与设计体系：内置 Professional、Modern、Minimal、Executive、Corporate、Elegant 等多套专业级文档主题预设，并支持深度主题定制与全局 Token 统一。
🧩 开箱即用的模块与区块（Blocks）：提供发票清单（Invoice）、商业财务报表（Report）、表格（Data Table）、合同签名栏等丰富的高频业务组件模板。

快速上手与示例代码

# 通过 shadcn CLI 按需添加 Takumi 基础组件
pnpm dlx shadcn@latest add @pdfcn/takumi/alert

# 或直接安装完整企业发票模板区块（以 Forme 引擎为例）
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">账单凭证 #INV-2026-001</Text>
            <Text variant="muted">感谢您的选购，以下为本次交易的明细清单。</Text>
          </Card>
        </PdfcnThemeProvider>
      </Page>
    </Document>
  );
}

技术选型建议与适用场景

非常适合：正在使用 React 技术栈、希望以声明式组件方式生成美观 PDF 报表/发票/合同证书的企业与团队；对设计品质有高要求且偏好 shadcn 工作流的开发者。
与同类方案对比：相比于繁琐且样式能力受限的传统 @react-pdf/renderer 原生书写方式，pdfcn 提供了更高抽象、更美观的主题与开箱即用的业务级区块，开发效率倍增。

pdfcn

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

Ambient CSS

23rd

Duolingo UI (ShadLingo)