Skip to main content
Dynamic page number field. 
<Paragraph>
  Page <PageNumber />
</Paragraph>

​
Props

PropTypeDefaultDescription
type"current" | "total" | "both""current"What to display
formatstring—Custom format string

​
Types

​
Current page

<PageNumber />
// or
<PageNumber type="current" />
Outputs: 1, 2, 3…

​
Total pages

<PageNumber type="total" />
Outputs the total page count.

​
Both

<PageNumber type="both" />
Outputs: “Page 1 of 10”

​
Custom format

Use {current} and {total} placeholders: 
<PageNumber format="{current} / {total}" />
// Output: "1 / 10"

<PageNumber format="- {current} -" />
// Output: "- 1 -"

<PageNumber format="Page {current}" />
// Output: "Page 1"

<PageNumber format="{current} of {total} pages" />
// Output: "1 of 10 pages"

​
Usage

PageNumber is typically used inside headers or footers: 
<Section>
  <Section.Footer>
    <Paragraph className="text-center">
      <PageNumber type="both" />
    </Paragraph>
  </Section.Footer>

  <Paragraph>Content...</Paragraph>
</Section>
Can also be used in regular content: 
<Paragraph>
  See page <PageNumber /> for details.
</Paragraph>

​
Common patterns

<Section.Footer>
  <Paragraph className="text-center text-xs">
    <PageNumber />
  </Paragraph>
</Section.Footer>

​
Page X of Y

<Section.Footer>
  <Paragraph className="text-center text-xs">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

​
With document title

<Section.Footer>
  <Paragraph className="text-xs">
    Annual Report 2024<Tab /><Tab />Page <PageNumber />
  </Paragraph>
</Section.Footer>

​
Styled page number

<Section.Footer>
  <Paragraph className="text-center">
    <Text className="text-gray-400 text-xs">
      Page <PageNumber /> of <PageNumber type="total" />
    </Text>
  </Paragraph>
</Section.Footer>

​
Right-aligned

<Section.Footer>
  <Paragraph className="text-right text-xs text-gray-500">
    <PageNumber type="both" />
  </Paragraph>
</Section.Footer>