# Installation

Install PDF components, blocks, and themes from the registry.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



## Prerequisites [#prerequisites]

A React project that can run either [Takumi](https://takumi.kane.tw/docs/pdf) or [Forme](https://docs.formepdf.com).

## Installation [#installation]

Run the following command to add a Takumi component:

```bash
npx shadcn@latest add @pdfcn/takumi/text
```

Forme components use the `forme/` namespace:

```bash
npx shadcn@latest add @pdfcn/forme/text
```

The registry installs the matching renderer dependencies and the shared theme utilities required by the selected component.

## Usage [#usage]

Import the installed component and use it inside your renderer's document primitives:

```tsx
import { Document, Page } from "@/components/pdf/pdf-primitives";
import { PdfcnThemeProvider } from "@/components/pdf/theme-provider";
import { Text } from "@/components/pdf/text";

export function Invoice() {
  return (
    <Document>
      <Page size="A4">
        <PdfcnThemeProvider>
          <Text variant="title">Invoice</Text>
        </PdfcnThemeProvider>
      </Page>
    </Document>
  );
}
```

For Forme, use `Document` and `Page` from `@formepdf/react`; the installed pdfcn component API stays the same.

## Install a Block [#install-a-block]

Blocks are complete document templates composed from registry components:

```bash
npx shadcn@latest add @pdfcn/takumi/invoice-minimal
```

Use the `forme/` namespace for the equivalent Forme document:

```bash
npx shadcn@latest add @pdfcn/forme/invoice-minimal
```

## Install a Theme [#install-a-theme]

pdfcn ships theme presets that integrate with `PdfcnThemeProvider`:

```bash
npx shadcn@latest add @pdfcn/takumi/theme-minimal
```

For Forme:

```bash
npx shadcn@latest add @pdfcn/theme-minimal
```