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.
Six heading levels for document structure. Automatically styled and included in Table of Contents.
<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
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
Styling
Override default styles with Tailwind:
<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:
<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:
<Section>
<TableOfContents title="Contents" maxLevel={3} />
</Section>
<Section>
<H1>Introduction</H1>
<Paragraph>...</Paragraph>
<H2>Background</H2>
<Paragraph>...</Paragraph>
<H3>Details</H3>
<Paragraph>...</Paragraph>
</Section>
Bookmarks
Use id for internal document links:
<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:
<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 |
