What is this?
pdfcn is a free, open-source collection of ready-to-use, customizable PDF components for React that you copy into your project and ship, rather than install as a dependency.
pdfcn is a free, open-source collection of ready-to-use, customizable PDF components for React that you copy into your project and ship, rather than install as a dependency.Is this a library I import, or a shadcn-style set of components I copy in?It works like shadcn/ui: you copy component source into your own codebase using the same registry format and CLI workflow, so you own and can edit the generated code directly.
It works like shadcn/ui: you copy component source into your own codebase using the same registry format and CLI workflow, so you own and can edit the generated code directly.How do I add pdfcn components to my React project?You pull individual components and blocks — tables, forms, charts, invoices, reports and more — from pdfcn's registry using the shadcn/ui-compatible CLI workflow.
You pull individual components and blocks — tables, forms, charts, invoices, reports and more — from pdfcn's registry using the shadcn/ui-compatible CLI workflow.Do I need to set up Takumi or Forme separately?No, each component just renders its PDF through one of two built-in rendering engines, Takumi or Forme, and you pick which one a given component uses.
No, each component just renders its PDF through one of two built-in rendering engines, Takumi or Forme, and you pick which one a given component uses.Does it come preconfigured, or do I need to tweak a lot before it works?It's zero-config and works out of the box with sensible defaults, while still exposing props and shared themes if you want to customize further.
It's zero-config and works out of the box with sensible defaults, while still exposing props and shared themes if you want to customize further.What are Takumi and Forme?They are the two separate PDF rendering engines pdfcn is built on top of, and each component lets you choose which one generates its output.
They are the two separate PDF rendering engines pdfcn is built on top of, and each component lets you choose which one generates its output.Can I preview components before using them?Yes, every component and block has a live preview rendered directly in the documentation, so you can see the output before copying it in.
Yes, every component and block has a live preview rendered directly in the documentation, so you can see the output before copying it in.Can I restyle the generated PDFs, like invoices or reports?Yes, components ship with sensible props and shared themes, and since the code is copied into your project you fully own and can modify it.
Yes, components ship with sensible props and shared themes, and since the code is copied into your project you fully own and can modify it.Does using pdfcn require learning a new component API?Not really — it's composable from focused React components and renderer primitives, so you build documents the same way you'd build normal React UI.
Not really — it's composable from focused React components and renderer primitives, so you build documents the same way you'd build normal React UI.What are similar projects?Monocharts, rare-ui, arc-library, chakra-ui, core, shadcn-vue, tamagui, styled-components
Monocharts, rare-ui, arc-library, chakra-ui, core, shadcn-vue, tamagui, styled-componentsWhich topics is it in?pdf-generation, shadcn, jsx, reactjs, design-system, document-processing, component-library, wasm, pdf, ui-components, web-development, rust
pdf-generation, shadcn, jsx, reactjs, design-system, document-processing, component-library, wasm, pdf, ui-components, web-development, rust