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.