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>