Paper framePro

A printed page for documents and reports: true A4, Letter or A5 proportions, margins in millimetres, running header and footer, page numbers and a stack of sheets.

Markdown

On this page

ProA report as it will print, A4 with a stack

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/paper-frame

Usage

tsx

import { PaperFrame } from "@/components/ui/chatcn/pro/paper-frame"

<PaperFrame width={520} pageNumber={1} pageCount={6} header="Churn review, Q3 2026">
  <YourReport />
</PaperFrame>

The page renders at its true CSS size (A4 is 794 x 1123 px) and is scaled to width, so 11 pt type looks like 11 pt on paper. A white sheet stays white on a dark page and resets the kit tokens inside, so components on it render as they would in light mode; tone="auto" follows the theme instead. Content that runs past the bottom margin is clipped and the footer says it continues.

Examples

Every state

ProRendering, guides, overflow, landscape

Props

Prop	Type	Notes
`size`	`"a4" \| "letter" \| "a5"`	Default a4
`orientation`	`"portrait" \| "landscape"`
`width`	`number`	Rendered width. Default 420
`margins`	`number \| { top, right, bottom, left }`	In mm. Default 20
`tone`	`"white" \| "auto"`	Default white
`header`, `footer`	`ReactNode`	Set in the margins
`pageNumber`, `pageCount`	`number`	Shown as 2 of 6
`stack`	`number`	Sheets behind, 0 to 3
`guides`	`boolean`	Margin guides and crop marks
`loading`	`boolean`	Placeholder lines

Keyboard

The frame adds no controls. Focus moves through the page content as usual.

Accessibility

Sheets behind, shadows, guides and crop marks are decorative and hidden.
The frame is aria-busy while loading. Page numbers stay left to right in RTL documents.

Motion

None. The page is still, like paper.