> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hr

Horizontal rule (line separator).

```tsx theme={"dark"}
<Hr />
```

***

## Props

| Prop        | Type     | Description      |
| ----------- | -------- | ---------------- |
| `className` | `string` | Tailwind classes |

***

## Usage

Visually separate sections:

```tsx theme={"dark"}
<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:

```tsx theme={"dark"}
<Hr className="mt-4 mb-4" />
```

***

## Common patterns

### Section divider

```tsx theme={"dark"}
<Paragraph>End of introduction.</Paragraph>

<Hr />

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

### Document break

```tsx theme={"dark"}
<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

```tsx theme={"dark"}
<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>
```

### Footer separator

```tsx theme={"dark"}
<Section.Footer>
  <Hr />
  <Paragraph className="text-center text-xs text-gray-500">
    © 2024 Company Name. All rights reserved.
  </Paragraph>
</Section.Footer>
```

***

## Hr vs BreakPage

| Element     | Purpose                                          |
| ----------- | ------------------------------------------------ |
| `Hr`        | Visual separator, content continues on same page |
| `BreakPage` | Forces content to next page                      |

Use `Hr` for visual breaks within a page. Use `BreakPage` to start a new page.