Page

Defines a page in the PDF document.

Every PDF needs at least one Page inside a Document. Pages define the paper size, orientation, and background.

Demo

A4 page with content

tsx

import { Document, Page, Block, Text, Tailwind } from "@ui-registries/pdf";
<Tailwind>  <Document>    <Page size="A4" className="p-12 bg-white flex flex-col">      <Text className="text-2xl font-bold text-gray-900">Report Title</Text>      <Text className="text-sm text-muted-foreground mt-1">        Generated on January 15, 2025      </Text>
      <Block className="flex-1 mt-8">        <Text className="text-base text-gray-700 leading-relaxed">          Page content goes here.        </Text>      </Block>
      <Text className="text-xs text-gray-400 text-center">        Page 1 of 1      </Text>    </Page>  </Document></Tailwind>

Landscape letter size

tsx

<Page size="LETTER" orientation="landscape" className="p-8 bg-white">  <Block className="flex flex-row gap-6">    <Block className="flex-1">      <Text className="text-lg font-bold">Slide Title</Text>    </Block>    <Block className="flex-1">      <Text className="text-sm text-gray-600">Supporting content</Text>    </Block>  </Block></Page>

Custom page size

tsx

<Page size={{ width: 400, height: 200 }} className="p-6 bg-gray-900">  <Text className="text-xl font-bold text-white text-center">    Custom Size Card  </Text></Page>

tsx

<Page size="A4" className="p-12 bg-white">  <Block fixed className="absolute top-6 left-12 right-12 flex flex-row justify-between">    <Text className="text-xs text-gray-400">Acme Corp</Text>    <Text className="text-xs text-gray-400">Confidential</Text>  </Block>
  {/* Scrollable content below the fixed header */}  <Block className="mt-8">    <Text className="text-base text-gray-700">Report body...</Text>  </Block></Page>

Auto height

A size without height (size={{ width: 420 }}) gives a single page that grows with its content — handy for receipts, tickets or previews. Such a page never breaks, so breakable={false} on its children has no effect.

tsx

<Page size={{ width: 420 }} className="gap-4 p-10">  …</Page>

Single page

By default, content that doesn't fit flows onto new pages. breakable={false} keeps everything on one page of the requested size: content that is too long is cut off at the bottom of the page instead of creating a new one.

Props

Prop	Type	Default
`breakable?`	`boolean`	—
`children?`	`React.ReactNode`	—
`className?`	`string`	—
`style?`	`Style`	—
`bookmark?`	`Bookmark`	—
`break?`	`boolean` Force the wrapping algorithm to start a new page when rendering the element.	—
`debug?`	`boolean` Enables debug mode on page bounding box.	—
`dpi?`	`number`	—
`experimentalPagination?`	`boolean` Opt the document into the new pagination engine: content is measured once and packed into pages, dramatically faster on long documents. Any page opting in switches the whole document. Implied by `layout`.	—
`fixed?`	`boolean` Render component in all wrapped pages.	—
`id?`	`string`	—
`layout?`	`((props: PageLayoutProps) => React.ReactNode)` A template component rendered around every page this Page produces. Where it renders `children` is where page content flows; everything else repeats as page chrome with its space reserved. Like render props, layout components may not use hooks. Implies `experimentalPagination`.	—
`minPresenceAhead?`	`number` Hint that no page wrapping should occur between all sibling elements following the element within n points	—
`orientation?`	`Orientation`	—
`size?`	`PageSize`	—