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

# Document

Root element for every document. Contains one or more sections.

```tsx theme={"dark"}
import { Document, Section, Paragraph } from "@cordel/react-docx";

const MyDocument = () => (
  <Document>
    <Section>
      <Paragraph>Hello</Paragraph>
    </Section>
  </Document>
);
```

***

## Props

| Prop        | Type               | Description                              |
| ----------- | ------------------ | ---------------------------------------- |
| `children`  | `ReactNode`        | Section elements                         |
| `styles`    | `DocumentStyles`   | Default fonts and heading styles         |
| `metadata`  | `DocumentMetadata` | Document metadata (title, author, etc.)  |
| `className` | `string`           | Tailwind classes (inherited by children) |

***

## Document styles

Configure default fonts and heading styles:

```tsx theme={"dark"}
<Document
  styles={{
    defaultFont: {
      name: "Arial",
      size: 11,
    },
    heading1: {
      font: "Arial",
      size: 24,
      bold: true,
      color: "1F4E78",
    },
    heading2: {
      font: "Arial",
      size: 18,
      bold: true,
      color: "2E75B5",
    },
  }}
>
  <Section>
    <H1>Uses heading1 style</H1>
    <H2>Uses heading2 style</H2>
    <Paragraph>Uses defaultFont</Paragraph>
  </Section>
</Document>
```

### Font config

```typescript theme={"dark"}
interface FontConfig {
  name?: string;  // Font family
  size?: number;  // Size in points
}
```

### Heading config

```typescript theme={"dark"}
interface HeadingStyleConfig {
  font?: string;
  size?: number;
  color?: string;   // Hex without #
  bold?: boolean;
  italic?: boolean;
}
```

***

## Metadata

Embed metadata in the document's core properties:

```tsx theme={"dark"}
<Document
  metadata={{
    title: "Invoice #1234",
    creator: "Acme Corp",
    subject: "Monthly billing",
    description: "Invoice for January 2024",
    keywords: "invoice, billing",
    category: "Finance",
  }}
>
  <Section>
    <Paragraph>Content</Paragraph>
  </Section>
</Document>
```

### DocumentMetadata

```typescript theme={"dark"}
interface DocumentMetadata {
  title?: string;
  subject?: string;
  creator?: string;
  description?: string;
  keywords?: string;        // Comma-separated
  lastModifiedBy?: string;
  category?: string;
}
```

All fields are optional. Only provided values are written to the file.

***

## Style inheritance

Classes cascade to children:

```tsx theme={"dark"}
<Document className="font-serif text-gray-800">
  <Section>
    <Paragraph>Inherits font-serif and text-gray-800</Paragraph>
    <Paragraph className="text-blue-600">
      Inherits font-serif, overrides color
    </Paragraph>
  </Section>
</Document>
```

***

## Multiple sections

```tsx theme={"dark"}
<Document>
  <Section>
    <H1>Title Page</H1>
  </Section>

  <Section margins={{ top: "0.5in" }}>
    <Paragraph>Main content</Paragraph>
  </Section>

  <Section pageSize={{ orientation: "landscape" }}>
    <Paragraph>Wide content</Paragraph>
  </Section>
</Document>
```

Each section can have different margins, page sizes, headers, and footers.