Home
Categories
Others
Copy-Paste PDF Components for React – PDFx

Copy-Paste PDF Components for React – PDFx

akii09 First listed on March 26, 2026
Live Demo Download Source Code

Description:

PDFx is a React component library that provides pre-built, themeable components for PDF document creation.

The library builds on @react-pdf/renderer and follows the copy-paste model of shadcn/ui. It includes a CLI for component management, a centralized theme configuration file, and full TypeScript support throughout.

Features

  • Places component source code directly in your project folder for complete ownership and customization freedom.
  • Allows you to control colors, typography, spacing, and page settings across all components.
  • A CLI tool for initialization, component addition, theme switching, and registry management.
  • Full TypeScript support with Zod validation and compile-time type checking.
  • Bundles zero runtime overhead since only the components you import are included in your final build.
  • Professional, high-quality PDF output with full rendering control.
  • Supports PDF-native features including page breaks, headers, footers, page numbers, and watermarks.
  • Includes data visualization components like DataTable and Graph for reporting use cases.

Use Cases

  • Generate invoices, receipts, and contracts with consistent branding and professional layouts.
  • Create monthly reports and financial statements with data tables and visualizations.
  • Produce course certificates, diplomas, and official credentials with custom branding elements.
  • Build professional resumes, cover letters, and portfolio documents with flexible layouts.

How to Use It

1. To get started, make sure you have these dependencies installed:

  • Node.js ≥ 20.0.0
  • A React project with @react-pdf/renderer installed

2. Run the following command from your project root. This creates src/components/pdfx/ and registers the base project config.

# Scaffold the PDFx directory structure and initial configuration
npx @akii09/pdfx-cli@beta init

3. Add components to your project. Each component lands in src/components/pdfx/ as a TypeScript file you can edit directly.

# Add a single component by name
npx @akii09/pdfx-cli add heading
# Add several components at once
npx @akii09/pdfx-cli add text table card badge divider

4. Run npx @akii09/pdfx-cli list to see all available components with their install status. The current component set includes:

Alert, Badge, Card, DataTable, Divider, Form, Graph, Heading, Image, KeepTogether, KeyValue, Link, List, PageBreak, PageFooter, PageHeader, PageNumber, QRCode, Section, Signature, Stack, Table, Text, Watermark

5. Use those UI components to create your PDF document.

import { Document, Page } from '@react-pdf/renderer';
import { PdfAlert } from '@/components/pdfx/alert/pdfx-alert';
import { Heading } from '@/components/pdfx/heading/pdfx-heading';
import { Text } from '@/components/pdfx/text/pdfx-text';

export function MyDocument() {
  return (
    <Document>
      <Page size="A4" style={{ padding: 40 }}>
        <Heading level={1}>Contract Agreement</Heading>

        {/* Info callout */}
        <PdfAlert variant="info" title="Important Notice">
          This document requires a signature before proceeding.
        </PdfAlert>

        {/* Success confirmation */}
        <PdfAlert variant="success" title="Payment Confirmed">
          Your payment of $500.00 has been received.
        </PdfAlert>

        {/* Warning callout */}
        <PdfAlert variant="warning" title="Deadline Approaching">
          Please submit your documents by March 15, 2026.
        </PdfAlert>

        {/* Error alert */}
        <PdfAlert variant="error" title="Action Required">
          Missing required information. Please review and resubmit.
        </PdfAlert>
      </Page>
    </Document>
  );
}

6. All available CLI commands:

  • npx @akii09/pdfx-cli block list: Lists all available layout blocks in the registry.
  • npx @akii09/pdfx-cli init: Initializes PDFx and scaffolds the component directory structure.
  • npx @akii09/pdfx-cli add <component-name>: Adds a component from the registry into src/components/pdfx/.
  • npx @akii09/pdfx-cli add <component-name> --force: Overwrites an existing local component with the latest registry version.
  • npx @akii09/pdfx-cli list: Lists all available components and displays their current install status.
  • npx @akii09/pdfx-cli diff <component-name>: Compares your local component file against the current registry version.
  • npx @akii09/pdfx-cli theme init: Scaffolds the theme configuration file into src/lib/pdfx-theme.ts.
  • npx @akii09/pdfx-cli theme switch <preset>: Switches the active theme preset (professional, modern, or minimal).
  • npx @akii09/pdfx-cli theme validate: Validates your theme file against the required type structure.
  • npx @akii09/pdfx-cli block add <block-name>: Adds a pre-composed, multi-component PDF layout block to your project.

Alternatives

  • @react-pdf/renderer: The foundational PDF rendering engine PDFx builds on, used directly for low-level, fully custom document layouts.
  • pdfmake: A document-definition-object library for PDF generation in browser and Node.js environments.
  • jsPDF: A client-side library for PDF output using coordinate-based layouts and HTML canvas capture.

FAQs

Q: How do I add a custom font to my PDF output?
A: Register the font with @react-pdf/renderer‘s Font.register() API. Then reference the font family name directly in your pdfx-theme.ts file under the heading or body typography tokens.

Q: Can I use PDFx in a Next.js App Router project?
A: Yes. Add the 'use client' directive to any component that imports from ./components/pdfx.

Q: How do I update a component after the registry releases a new version?
A: Run npx @akii09/pdfx-cli diff <component-name> to compare your local file against the registry version. Then run npx @akii09/pdfx-cli add <component-name> --force to overwrite with the update.

Add Comment