Skip to main content

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.

Defines a page layout with margins, page size, headers, and footers. 
<Section>
  <Paragraph>Content</Paragraph>
</Section>

​
Props

PropTypeDescription
childrenReactNodeContent, headers, footers
marginsMarginOptionsPage margins
pageSizePageSizeOptionsPage dimensions and orientation
classNamestringTailwind classes

​
Margins

<Section
  margins={{
    top: "1in",
    bottom: "1in",
    left: "1.25in",
    right: "1.25in",
    header: "0.5in",
    footer: "0.5in",
    gutter: "0.5in",  // Extra margin for binding
  }}
>
Defaults: 1 inch on all sides, 0.5 inch for header/footer, 0 for gutter.

​
Page size

// Letter (default)
<Section pageSize={{ width: "8.5in", height: "11in" }}>

// A4
<Section pageSize={{ width: "210mm", height: "297mm" }}>

// Landscape
<Section pageSize={{ orientation: "landscape" }}>

// Custom
<Section pageSize={{ width: "6in", height: "9in" }}>

​
Units

Margins and page sizes accept:
  • 1 or "1in" (inches)
  • "2.5cm" (centimeters)
  • "25mm" (millimeters)
  • "72pt" (points)
  • "10%" (percentage of page dimension)

​
Headers and footers

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

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

  <H1>Content</H1>
  <Paragraph>Goes here</Paragraph>
</Section>
Headers and footers can contain paragraphs, headings, text, and page numbers.

​
Page numbers

<PageNumber type="current" />     // Current page
<PageNumber type="total" />       // Total pages
<PageNumber type="both" />        // "1 of 10"
<PageNumber type="both" format="Page {current} of {total}" />

​
Multiple sections

Each section starts on a new page with its own settings: 
<Document>
  {/* Title page - larger margins, no header */}
  <Section margins={{ top: "3in", left: "2in" }}>
    <H1 className="text-center">Report Title</H1>
  </Section>

  {/* Main content - standard margins with header/footer */}
  <Section margins={{ top: "1in" }}>
    <Section.Header>
      <Paragraph className="text-gray-500">Report Title</Paragraph>
    </Section.Header>

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

    <H1>Chapter 1</H1>
    <Paragraph>Content...</Paragraph>
  </Section>

  {/* Appendix - landscape for wide tables */}
  <Section pageSize={{ orientation: "landscape" }}>
    <H1>Appendix</H1>
    <Table>...</Table>
  </Section>
</Document>

​
Full example

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

const Report = () => (
  <Document styles={{ defaultFont: { name: "Calibri", size: 11 } }}>
    <Section
      margins={{
        top: "1in",
        bottom: "1in",
        left: "1.25in",
        right: "1in",
        header: "0.5in",
        footer: "0.5in",
      }}
      pageSize={{ width: "8.5in", height: "11in" }}
    >
      <Section.Header>
        <Paragraph className="text-right text-gray-500 text-sm">
          Quarterly Report (Q4 2024)
        </Paragraph>
      </Section.Header>

      <Section.Footer>
        <Paragraph className="text-center text-gray-400 text-xs">
          Confidential (Page <PageNumber type="current" />)
        </Paragraph>
      </Section.Footer>

      <H1>Quarterly Report</H1>
      <Paragraph>Content goes here...</Paragraph>
    </Section>
  </Document>
);