Skip to main content
Force content to the next page or column.
<BreakPage />

Props

PropTypeDefaultDescription
type"page" | "column" | "textWrapping""page"Break type

Page break

Start content on a new page:
<H1>Chapter 1</H1>
<Paragraph>Content...</Paragraph>

<BreakPage />

<H1>Chapter 2</H1>
<Paragraph>This starts on a new page.</Paragraph>

Break types

Page (default)

<BreakPage />
<BreakPage type="page" />
Forces content to the next page.

Column

<BreakPage type="column" />
Forces content to the next column (in multi-column layouts).

Text wrapping

<BreakPage type="textWrapping" />
Breaks text flow around floating objects.

Common patterns

Chapter separation

const Chapter = ({ number, title, children }) => (
  <>
    <BreakPage />
    <H1>Chapter {number}: {title}</H1>
    {children}
  </>
);

<Document>
  <Section>
    <H1>Introduction</H1>
    <Paragraph>...</Paragraph>

    <Chapter number={1} title="Getting Started">
      <Paragraph>...</Paragraph>
    </Chapter>

    <Chapter number={2} title="Advanced Topics">
      <Paragraph>...</Paragraph>
    </Chapter>
  </Section>
</Document>

Title page

<Document>
  <Section>
    {/* Title page */}
    <Paragraph className="mt-32 text-center">
      <Text className="text-4xl font-bold">Annual Report</Text>
    </Paragraph>
    <Paragraph className="text-center text-xl text-gray-500">
      Fiscal Year 2024
    </Paragraph>

    <BreakPage />

    {/* Content starts */}
    <TableOfContents />

    <BreakPage />

    <H1>Executive Summary</H1>
    <Paragraph>...</Paragraph>
  </Section>
</Document>

Appendix

<H1>Conclusion</H1>
<Paragraph>...</Paragraph>

<BreakPage />

<H1>Appendix A: Data Tables</H1>
<Table>...</Table>

<BreakPage />

<H1>Appendix B: References</H1>
<Paragraph>...</Paragraph>