Skip to main content
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

PropTypeDescription
childrenReactNodeText content
classNamestringTailwind classes
idstringBookmark 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>
Default sizes: H1 (32pt), H2 (26pt), H3 (24pt), H4-H6 (22pt). All bold by default.

​
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>
The TOC will list Introduction, Background, and Details with page numbers.

​
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

FeatureHeadingParagraph
In TOCYesNo
Default boldYesNo
Predefined sizesYesNo
Keep with nextYesNo
Use headings for structure. Use paragraphs for content.