pdfcn

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

UI & UX Design Development Open Source Productivity

About pdfcn

pdfcn, at 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, 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 and 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.