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

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：Aniket Pawar (@alaymanguy) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-08-13

> 原始來源：https://x.com/alaymanguy/status/2087656088124719304

## 證據與延伸閱讀

- [shadcnlabs 推出 pdfcn：免費開源、可直接複製客製化的 React PDF 元件與樣板。](https://x.com/alaymanguy/status/2087656088124719304)
- [pdfcn 拆成可組合的 React 元件](https://github.com/shadcn-labs/pdfcn) — 官方 Repository
- [畫面顯示的安裝方式與指令](https://video.twimg.com/amplify_video/2087655276979859456/vid/avc1/1280x720/VBmtI81pgac_sEpm.mp4?tag=29)
- [專案採用 MIT 授權與貢獻步驟](https://github.com/shadcn-labs/pdfcn/blob/main/LICENSE)
- [產品標題畫面與浮水印標語](https://github.com/shadcn-labs/pdfcn/blob/main/.github/assets/gh.png)

## 中文摘要

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

**核心定位** Aniket Pawar 於 2026 年 8 月 13 日介紹 pdfcn，並邀請使用者前往[官方網站](https://www.pdfcn.dev/)試用，以及在[GitHub 專案](https://github.com/shadcn-labs/pdfcn)上給予 ⭐。pdfcn 建立在 Takumi 與 Forme 之上，支援 shadcn/ui 的 registry 格式與 CLI 工作流程，主打零設定與單一指令安裝；貼文指出目前提供 10 種以上主題、元件與 blocks，且全部免費、開放原始碼。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/58e4aacd7eb4ffc8.png)
> {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 檢視程式碼。畫面顯示的安裝方式包括：

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1786640032079-xjz2nqni.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/61ca52b1128e0e2e.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> React 專案的 PDF 元件庫首頁及各項樣板與元件預覽介面

```bash
npx dlx shadcn@latest add @pdfcn/takumi/heading
npx dlx shadcn@latest registry add @pdfcn
```

這些指令屬於來源展示的操作方式，實際使用前仍應先核對官方文件與專案內容。

**開源協作** 專案採用 MIT 授權，README 邀請社群依序參與貢獻：

1. Fork repository
2. 建立功能 branch：`git checkout -b feature/amazing-feature`
3. 建立 commit：`git commit -m 'Add some amazing feature'`
4. 推送 branch：`git push origin feature/amazing-feature`
5. 開啟 Pull Request

## 媒體內容

**React 專案的 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 檢視樣板清單

## 標籤

開源專案, React, 新產品, shadcnlabs