# [pdfcn](<https://www.pdfcn.dev/>)

[pdfcn.dev](<https://www.pdfcn.dev/>)

Copy-paste PDF components, blocks and themes for React, built on Takumi and Forme and installed with the shadcn CLI.

[UI & UX Design](<https://creatorstoolbox.com/communities/ui-ux>)[Development](<https://creatorstoolbox.com/communities/development>)[Open Source](<https://creatorstoolbox.com/communities/open-source>)[Productivity](<https://creatorstoolbox.com/communities/productivity>)

## About pdfcn

pdfcn, at [pdfcn.dev](<https://www.pdfcn.dev/>), is a collection of copy-paste, accessible, customizable PDF components for React, from shadcn labs. It's built on Takumi and Forme and works with shadcn/ui and the shadcn CLI.

It follows the shadcn model for document generation. You copy components into your project and own the code, with no lock-in. The component API is the same across Takumi and Forme, and you can drop down to the underlying renderer when you need to.

You install a component with the shadcn CLI, for example npx shadcn@latest add @pdfcn/takumi/text, or @pdfcn/forme/text for Forme. The registry installs the matching renderer dependencies and the shared theme utilities that component needs.

The registry includes components such as text, heading, table, data table, list, QR code, watermark, signature, page header, page footer, page number, graph, alert, card, form and key value. Blocks are complete document templates, such as @pdfcn/takumi/invoice-minimal, and the docs list invoices, reports, an event ticket, a packing slip, a shipping label and more. Theme presets like @pdfcn/takumi/theme-minimal install into PdfcnThemeProvider.

The Theme Builder lets you design and export a reusable theme with a live PDF preview on either engine. An MCP page explains how to register the shadcn MCP server so your editor can discover the registry's components.

pdfcn's changelog dates its initial release to August 2026. The code is MIT licensed at [github.com](<https://github.com/shadcn-labs/pdfcn>), and the site credits Aniket Pawar as its builder.

Pricing: Its GitHub repository describes it as 100% free, and the code is MIT licensed. Checked November 15, 2026 at [https://www.pdfcn.dev](<https://www.pdfcn.dev/>) and [https://github.com/shadcn-labs/pdfcn](<https://github.com/shadcn-labs/pdfcn>).

Pricing model: Free

## Features

- Copy-paste PDF components for React that you own and can edit

- Built on Takumi and Forme, with the same component API on both

- Installs through the shadcn CLI, for example npx shadcn@latest add @pdfcn/takumi/text

- Components for text, headings, tables, lists, QR codes, watermarks, signatures, page headers and numbers, graphs, alerts and cards

- Blocks are full document templates, such as invoices, reports, tickets and shipping labels

- Theme presets that install into PdfcnThemeProvider

- Theme Builder with a live PDF preview

- Works with the shadcn MCP server so your editor can find the components

## FAQs

Common questions about pdfcn

What is pdfcn?

A collection of copy-paste PDF components for React from shadcn labs. It's built on Takumi and Forme and installs through the shadcn CLI.

Is pdfcn free?

Yes. Checked November 15, 2026.

How do I install a component?

Run the shadcn CLI with the pdfcn namespace, for example npx shadcn@latest add @pdfcn/takumi/text. Forme components use the forme/ namespace, as in @pdfcn/forme/text. You need a React project that can run Takumi or Forme.

What are blocks?

Complete document templates composed from registry components. One example is @pdfcn/takumi/invoice-minimal. The docs list invoices, reports, an event ticket, meeting minutes, a packing slip and a shipping label, among others.

Do I have to pick Takumi or Forme?

You choose an engine when you install, and the component API is the same on both. You can also drop down to the renderer's own APIs when you need more control.

What does the Theme Builder do?

It lets you adjust a theme's colors, typography and layout while a PDF preview updates, then export the theme. It works with either Takumi or Forme.

Does pdfcn work with AI coding tools?

The docs have an MCP page. Running npx shadcn@latest mcp init registers the shadcn MCP server, so your editor can discover registry components, including pdfcn's.

## Featured

[Free Guide: Make Money with AI

Download the guide from HubSpot](<https://sendercircle.com/r.php?id=4519>)[Free Guide: 100 Side Hustle Ideas

Download the guide from HubSpot](<https://sendercircle.com/r.php?id=4520>)[Free Guide: ChatGPT at Work

Download the guide from HubSpot](<https://sendercircle.com/r.php?id=4516>)[Free Course: AI for Business

4-part crash course from HubSpot](<https://sendercircle.com/r.php?id=4518>)[Free Guide: The $0 Hire

Download the guide from BELAY](<https://sendercircle.com/r.php?id=4521>)

## Similar products

- [![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrixdotmatrix.zzzzshawn.cloud

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/products/dotmatrix>)

- [![Looseleaf](<https://creatorstoolbox.com/images/logos/looseleaf-f1be87e374a4b9c925d388e2694654a5f0bbde192a80b0c185e612c674434631.png>)

Looseleafkevintngo.github.io/looseleaf

MIT-licensed React components that look drawn by hand, with the same parts and props as shadcn/ui.](<https://creatorstoolbox.com/products/looseleaf>)

- [![useLayouts](<https://www.google.com/s2/favicons?domain=uselayouts.com&sz=128>)

useLayoutsuselayouts.com

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.](<https://creatorstoolbox.com/products/uselayouts>)

- [![Loading UI](<https://www.google.com/s2/favicons?domain=loading-ui.com&sz=128>)

Loading UIloading-ui.com

Free, open-source CSS and React loaders, spinners, and animations for building polished, accessible loading states.](<https://creatorstoolbox.com/products/loading-ui>)

- [![Paperlab](<https://creatorstoolbox.com/images/paperlab-logo.svg>)

Paperlabpaperlab.nawwara.studio

Physical paper as a React component — real 3D sheets that peel, unroll, fold and hang, dialled in through a visual editor.](<https://creatorstoolbox.com/products/paperlab>)

- [![snapcn](<https://creatorstoolbox.com/images/logos/snapcn-icon.png>)

snapcnsnapcn.dev

shadcn registry of Remotion components for React video. Install with the CLI and you own the code. Free MIT components, with a paid Pro tier.](<https://creatorstoolbox.com/products/snapcn>)

---
Canonical source: https://creatorstoolbox.com/products/pdfcn
