Skip to main content
Horizontal rule (line separator).
<Hr />

Props

PropTypeDescription
classNamestringTailwind classes

Usage

Visually separate sections:
<H1>Section 1</H1>
<Paragraph>Content for section one...</Paragraph>

<Hr />

<H1>Section 2</H1>
<Paragraph>Content for section two...</Paragraph>

Styling

Add spacing around the rule:
<Hr className="mt-4 mb-4" />

Common patterns

Section divider

<Paragraph>End of introduction.</Paragraph>

<Hr />

<H2>Main Content</H2>
<Paragraph>...</Paragraph>

Document break

<Paragraph>
  This concludes Part I of the report.
</Paragraph>

<Hr className="mt-8 mb-8" />

<Paragraph className="text-center font-bold text-xl">
  Part II: Analysis
</Paragraph>

Signature section

<Hr className="mt-8" />

<Paragraph className="mt-4">
  <Text className="font-bold">Approved by:</Text>
</Paragraph>

<Paragraph className="mt-8">
  _______________________<BreakLine />
  Name and Title<BreakLine />
  Date
</Paragraph>
<Section.Footer>
  <Hr />
  <Paragraph className="text-center text-xs text-gray-500">
    © 2024 Company Name. All rights reserved.
  </Paragraph>
</Section.Footer>

Hr vs BreakPage

ElementPurpose
HrVisual separator, content continues on same page
BreakPageForces content to next page
Use Hr for visual breaks within a page. Use BreakPage to start a new page.