> ## 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.
# Creating Your First Document
Build a complete invoice document from scratch.
***
## What we're building
A professional invoice with:
* Page header and footer with page numbers
* Company info
* Customer details
* Line items table
* Total calculation
* Payment terms
***
## Setup
```bash theme={"dark"}
npm install @cordel/react-docx
```
Create `invoice.tsx`:
```tsx theme={"dark"}
import {
render,
Document,
Section,
Paragraph,
Text,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
Hr,
PageNumber,
} from "@cordel/react-docx";
```
***
## Document structure
Start with the basic shell:
```tsx theme={"dark"}
const Invoice = () => (
{/* Content goes here */}
);
```
***
## Page header and footer
Add repeating header and footer with page numbers:
```tsx theme={"dark"}
Acme Corp - Invoice
Page of
{/* Content goes here */}
```
These appear on every page of the section.
***
## Company info
Add company info and invoice number:
```tsx theme={"dark"}
const Invoice = () => (
Acme Corp
123 Business Street, New York, NY 10001
INVOICE
Invoice #: INV-2024-001
Date: January 15, 2024
);
```
***
## Customer details
Add billing information:
```tsx theme={"dark"}
Bill To:
John Smith
456 Customer Ave
Los Angeles, CA 90001
john@example.com
```
***
## Line items table
Add the products/services:
```tsx theme={"dark"}
| Description |
Qty |
Price |
Amount |
| Web Development Services |
40 |
$75.00 |
$3,000.00 |
| UI/UX Design |
20 |
$85.00 |
$1,700.00 |
| Hosting (Annual) |
1 |
$200.00 |
$200.00 |
```
***
## Total
Add subtotal, tax, and total:
```tsx theme={"dark"}
Subtotal: $4,900.00
Tax (10%): $490.00
Total: $5,390.00
```
***
## Payment terms
Add terms at the bottom:
```tsx theme={"dark"}
Payment Terms:
Due within 30 days. Please make checks payable to Acme Corp.
Thank you for your business!
```
***
## Complete code
```tsx theme={"dark"}
import {
render,
Document,
Section,
Paragraph,
Text,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
Hr,
PageNumber,
} from "@cordel/react-docx";
const Invoice = () => (
Acme Corp - Invoice
Page of
{/* Company Info */}
Acme Corp
123 Business Street, New York, NY 10001
INVOICE
Invoice #: INV-2024-001
Date: January 15, 2024
{/* Customer */}
Bill To:
John Smith
456 Customer Ave
Los Angeles, CA 90001
{/* Line Items */}
| Description |
Qty |
Price |
Amount |
| Web Development |
40 |
$75.00 |
$3,000.00 |
| UI/UX Design |
20 |
$85.00 |
$1,700.00 |
| Hosting (Annual) |
1 |
$200.00 |
$200.00 |
{/* Totals */}
Subtotal: $4,900.00
Tax (10%): $490.00
Total: $5,390.00
{/* Payment Terms */}
Payment Terms:
Due within 30 days.
Thank you for your business!
);
await render(, "./invoice.docx");
```
***
## Run it
```bash theme={"dark"}
npx tsx invoice.tsx
```
Open `invoice.docx` in Word.
***
## Next steps
* Add [variables](/react-docx/getting-started/rendering#variables) for dynamic data
* Learn more about [headers and footers](/react-docx/components/header-footer)
* Use [custom fonts](/react-docx/getting-started/tailwind#custom-fonts) via Tailwind config