shadcnlabs 推出 pdfcn：免費開源、可直接複製客製化的 React PDF 元件與樣板

shadcnlabs 推出 pdfcn：免費開源、可直接複製客製化的 React PDF 元件與樣板。 核心定位 Aniket Pawar 於 2026 年 8 月 13 日介紹 pdfcn，並邀請使用者前往官方網站試用，以及在GitHub 專案上給予 ⭐。pdfcn 建立在 Takumi 與 Forme 之上，支援 shadcn/ui 的 registry 格式與 CLI 工作流程，主打零設定與單一指令安裝；貼文指出目前提供 10 種以上主題、元件與 blocks，且全部免費、開放原始碼。 {s}/pdfcn 的產品標題畫面，深色背景中央帶有一透明長方形浮水印與大寫的 PDF 字樣，左上方印有白色的 {s}/pdfcn 產品名稱與「Beautiful PDFs, made simple.」副標題，右下角則標註「BY SHADCN-LABS.COM」。 功能與架構 pdfcn 將 PDF 生成功能拆成可組合的 React 元件，使用者可以選擇 Takumi 或 Forme 作為渲染基礎，再自行掌握產出的程式碼。文件提供即時預覽、共用主題與可調整的 props，適合建立發票、表單、報表、圖表與資料表等文件。官方文件也展示 Alert、Badge、Card、Data Table、Form、Graph、Heading、Keep Together、Page Header、QR Code、Signature、Table、Watermark 等元件，以及 Invoice 和 Report 類 blocks。 畫面展示 影片中的文件首頁以「Beautiful PDFs, made simple.」為主標，展示 Corporate Invoice、Financial report、Minimal invoice 與 keep-together 等樣板；Financial report 預覽包含圖表與風險摘要區塊，Minimal invoice 則可切換至 Code 檢視程式碼。畫面顯示的安裝方式包括： React 專案的 PDF 元件庫首頁及各項樣板與元件預覽介面 `bash npx dlx shadcn@latest add @pdfcn/takumi/heading npx dlx shadcn@latest registry add @pdfcn ` 這些指令屬於來源展示的操作方式，實際使用前仍應先核對官方文件與專案內容。 開源協作 專案採用 MIT 授權，README 邀請社群依序參與貢獻： Fork repository 建立功能 branch：git checkout -b feature/amazing-feature 建立 commit：git commit -m 'Add some amazing feature' 推送 branch：git push origin feature/amazing-feature 開啟 Pull RequestReact 專案的 PDF 元件庫首頁及各項樣板與元件預覽介面 影片中的 Prompt 與操作：操作步驟： 1. （00:07）點擊安裝指令並查看 Registry 對話方塊 2. （00:13）點擊右側 Components 列表檢視元件說明 3. （00:44）切換至 Code 檢視程式碼 4. （00:50）點擊 Get Started 進入文件頁面 5. （01:14）點擊側欄 Components 檢視元件清單 6. （02:16）點擊側欄 Blocks 檢視樣板清單原文：https://easyvibecoding.app/curated/2948-shadcnlabs-launches-pdfcn-open-source-react-pdf-components