Skip to main content
Headers and footers that repeat on every page of a section. 
<Section>
  <Section.Header>
    <Paragraph>My Document</Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph>Page <PageNumber /></Paragraph>
  </Section.Footer>

  <Paragraph>Content goes here...</Paragraph>
</Section>

​
Components

ComponentDescription
Section.HeaderContent at top of every page
Section.FooterContent at bottom of every page
PageNumberDynamic page number field

​
Basic usage

​
Header only

<Section>
  <Section.Header>
    <Paragraph className="text-gray-500 text-sm">
      Company Report 2024
    </Paragraph>
  </Section.Header>

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

<Section>
  <Section.Footer>
    <Paragraph className="text-center text-xs text-gray-400">
      Confidential
    </Paragraph>
  </Section.Footer>

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

​
Both

<Section>
  <Section.Header>
    <Paragraph className="text-right">Quarterly Report</Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph className="text-center">
      Page <PageNumber />
    </Paragraph>
  </Section.Footer>

  <H1>Q4 Results</H1>
  <Paragraph>...</Paragraph>
</Section>

​
Page numbers

The PageNumber component inserts dynamic page numbers.

​
Current page

<PageNumber />
// or
<PageNumber type="current" />
Outputs: 1, 2, 3…

​
Total pages

<PageNumber type="total" />
Outputs the total page count.

​
Both (current of total)

<PageNumber type="both" />
Outputs: “Page 1 of 10”

​
Custom format

<PageNumber format="{current} / {total}" />
Outputs: “1 / 10” 
<PageNumber format="- {current} -" />
Outputs: ”- 1 -“

​
Styling

Headers and footers support Tailwind classes.

​
Right-aligned header

<Section.Header>
  <Paragraph className="text-right text-sm text-gray-500">
    Document Title
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-center text-xs text-gray-400">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

​
Multiple lines

<Section.Header>
  <Paragraph className="font-bold">ACME Corporation</Paragraph>
  <Paragraph className="text-sm text-gray-500">
    Annual Report 2024
  </Paragraph>
</Section.Header>

​
Header/footer spacing

Control distance from page edge with margin options: 
<Section
  margins={{
    top: "1in",
    bottom: "1in",
    header: "0.5in",  // Distance from top edge to header
    footer: "0.5in",  // Distance from bottom edge to footer
  }}
>
  <Section.Header>...</Section.Header>
  <Section.Footer>...</Section.Footer>
</Section>

​
Allowed content

Headers and footers can contain:
ComponentSupported
ParagraphYes
H1-H6Yes
TextYes
Bold, Italic, etc.Yes (inside Paragraph)
PageNumberYes
TableNo
ImageNo
ListNo

​
Common patterns

​
Document title + page number

<Section.Header>
  <Paragraph className="text-sm text-gray-500">
    Project Proposal
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-center text-xs">
    <PageNumber type="both" />
  </Paragraph>
</Section.Footer>

​
Company branding

<Section.Header>
  <Paragraph>
    <Text className="font-bold">ACME Corp</Text>
    <Text className="text-gray-500"> | Internal Document</Text>
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-xs text-gray-400 text-center">
    Confidential - Do not distribute
  </Paragraph>
  <Paragraph className="text-xs text-gray-400 text-center">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

​
Left and right aligned (using tabs)

<Section.Footer>
  <Paragraph>
    Confidential<Tab /><Tab /><Tab />Page <PageNumber />
  </Paragraph>
</Section.Footer>

​
Different headers per section

Each section has its own header/footer. Use multiple sections for different headers: 
<Document>
  {/* Title page - no header/footer */}
  <Section>
    <H1 className="text-center mt-48">Annual Report</H1>
    <Paragraph className="text-center">2024</Paragraph>
  </Section>

  {/* Main content - with header/footer */}
  <Section>
    <Section.Header>
      <Paragraph className="text-gray-500">Annual Report 2024</Paragraph>
    </Section.Header>

    <Section.Footer>
      <Paragraph className="text-center">
        <PageNumber type="both" />
      </Paragraph>
    </Section.Footer>

    <H1>Executive Summary</H1>
    <Paragraph>...</Paragraph>
  </Section>

  {/* Appendix - different header */}
  <Section>
    <Section.Header>
      <Paragraph className="text-gray-500">Appendix</Paragraph>
    </Section.Header>

    <H1>Appendix A: Data Tables</H1>
    <Table>...</Table>
  </Section>
</Document>

​
Full example

import {
  render,
  Document,
  Section,
  H1,
  H2,
  Paragraph,
  Text,
  PageNumber,
} from "@cordel/react-docx";

const Report = () => (
  <Document>
    <Section
      margins={{
        top: "1in",
        bottom: "1in",
        left: "1.25in",
        right: "1in",
        header: "0.5in",
        footer: "0.5in",
      }}
    >
      <Section.Header>
        <Paragraph className="text-right text-sm text-gray-500">
          <Text className="font-bold">ACME Corp</Text> - Q4 Report
        </Paragraph>
      </Section.Header>

      <Section.Footer>
        <Paragraph className="text-center text-xs text-gray-400">
          Confidential | Page <PageNumber /> of <PageNumber type="total" />
        </Paragraph>
      </Section.Footer>

      <H1>Quarterly Report</H1>
      <Paragraph>
        This report summarizes Q4 2024 performance...
      </Paragraph>

      <H2>Financial Highlights</H2>
      <Paragraph>
        Revenue increased by 15% compared to Q3...
      </Paragraph>
    </Section>
  </Document>
);

await render(<Report />, "./report.docx");