> ## 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.

# Heading

Six heading levels for document structure. Automatically styled and included in Table of Contents.

```tsx theme={"dark"}
<H1>Main Title</H1>
<H2>Section</H2>
<H3>Subsection</H3>
```

***

## Props

| Prop        | Type        | Description                    |
| ----------- | ----------- | ------------------------------ |
| `children`  | `ReactNode` | Text content                   |
| `className` | `string`    | Tailwind classes               |
| `id`        | `string`    | Bookmark ID for internal links |

***

## All levels

```tsx theme={"dark"}
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
```

Default sizes: H1 (32pt), H2 (26pt), H3 (24pt), H4-H6 (22pt). All bold by default.

***

## Styling

Override default styles with Tailwind:

```tsx theme={"dark"}
<H1 className="text-blue-700">Blue heading</H1>
<H2 className="text-center">Centered</H2>
<H3 className="italic">Italic heading</H3>
```

***

## Document-level styles

Configure heading styles globally via `Document`:

```tsx theme={"dark"}
<Document
  styles={{
    heading1: {
      font: "Georgia",
      size: 28,
      color: "1F4E78",
      bold: true,
    },
    heading2: {
      font: "Georgia",
      size: 22,
      color: "2E75B5",
      bold: true,
    },
  }}
>
  <Section>
    <H1>Uses custom heading1 style</H1>
    <H2>Uses custom heading2 style</H2>
  </Section>
</Document>
```

***

## Table of Contents

Headings are automatically picked up by `TableOfContents`:

```tsx theme={"dark"}
<Section>
  <TableOfContents title="Contents" maxLevel={3} />
</Section>

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

  <H2>Background</H2>
  <Paragraph>...</Paragraph>

  <H3>Details</H3>
  <Paragraph>...</Paragraph>
</Section>
```

The TOC will list Introduction, Background, and Details with page numbers.

***

## Bookmarks

Use `id` for internal document links:

```tsx theme={"dark"}
<H1 id="intro">Introduction</H1>

{/* Later in document */}
<Paragraph>
  See <Link href="#intro">Introduction</Link>.
</Paragraph>
```

***

## Mixed content

Like `Paragraph`, headings can contain styled text:

```tsx theme={"dark"}
<H1>
  Report for <Text className="text-blue-600">Q4 2024</Text>
</H1>
```

***

## Heading vs Paragraph

| Feature          | Heading | Paragraph |
| ---------------- | ------- | --------- |
| In TOC           | Yes     | No        |
| Default bold     | Yes     | No        |
| Predefined sizes | Yes     | No        |
| Keep with next   | Yes     | No        |

Use headings for structure. Use paragraphs for content.