Section

<Section>
  <Paragraph>Content</Paragraph>
</Section>

<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
  }}
>

// 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" }}>

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

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

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

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>
);