PaperLast updated on
Last updated on
One sheet at the document's page geometry, and the fit-to-width hook.
Paper draws exactly one sheet, at the page geometry the document's tokens
name, and scales it to fit whatever frame it's given. It does not paginate:
content taller than one page just makes that one sheet taller, which is
exactly what Pages exists to prevent.
Preview
Installation
npx shadcn@4 add @paradoc/paperOr, with the Paradoc CLI, which writes the namespace into components.json for you:
npx paradoc-cli add paperInstalls to components/paradoc/paper.tsx.
Usage
import { Paper } from "@/components/paradoc/paper";<Paper className="w-full overflow-hidden bg-neutral-100 p-10"> <Document artifact={proposalForm} data={shortProposalData}> <Field path="provider" /> </Document></Paper>| Prop | Type | Default | Description |
|---|---|---|---|
| className? | string | — | Classes for the outer frame that scales and centers the sheet. |
| furniture? | PageFurniture | — | What every sheet carries outside the flow: a header, a footer, a stamp. Drawn inside the document's margin, so the page count does not change. |
| children | ReactNode | — | Content drawn on the one sheet. |
Composition
Paper reads its geometry — page size, margin — from the same document
tokens a Document or Bundle
resolves; it carries no tokens of its own. It draws whatever it is given, with
no Section or particular layout required around the
content.
Pages uses Paper's own Sheet internally for each
page it produces, so a preview that paginates never renders Paper directly
at the same time — Paper is for showing one sheet on its own, and Pages
is for showing however many a document's content actually needs.
useFitToWidth, the hook behind the scaling, is exported alongside Paper
for a caller that needs the same fit-to-frame behavior without the sheet
markup itself.
Page furniture
furniture is what the sheet carries outside the flow: a header band, a
footer band, and a stamp behind the content — the same object
Pages takes and the same object
renderPdf(element, { plan, furniture }) from
@paradoc/react-pdf takes. Each band is drawn inside the margin the
document declares, so it never moves the content; a band taller than that
margin fails by name rather than printing over the first line.
<Paper furniture={{ header: <span>Northwind Partners LLP</span>, footer: <PageNumber /> }}>
{document}
</Paper>One sheet is page 1 of 1, so a PageNumber drawn
here says so.
Variants
Paper takes an optional className for its outer frame, furniture, and
children.
Minimal content
Paper draws whatever it is given, with no Section or layout required
around it.
Custom frame
A custom className replaces the default frame's background and padding.
Overflowing content
Paper never paginates, so content taller than one page — a longer
proposal's line items — simply grows the one sheet past its normal height
instead of continuing onto a second sheet the way Pages would.