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

# Introduction

> React Docx lets you build .docx and .pdf files declaratively using React components and Tailwind-based styling, bringing a modern, component-driven workflow to document generation

React DOCX is a React renderer that outputs `.docx` files. Style with Tailwind classes. No third-party DOCX libraries.

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

const Invoice = () => (
  <Document>
    <Section>
      <H1 className="text-blue-700">Invoice #1234</H1>
      <Paragraph className="mt-4">
        <Text className="font-bold">Total: </Text>$420.00
      </Paragraph>
    </Section>
  </Document>
);
```

***

## What's supported

* Headings (H1-H6)
* Text formatting (bold, italic, underline, strikethrough)
* Lists (ordered, unordered, nested)
* Tables (colspan, rowspan, borders, cell padding)
* Images (png, jpg, etc. with sizing and cropping)
* Links (external and internal anchors)
* Sections (headers, footers, page margins, page size)
* Page numbers
* Table of Contents
* Variables (dynamic content with `useVariables` hook)

***

## What's not supported

* Charts
* Footnotes/endnotes
* Multi-column layouts
* Text boxes and shapes
* Floating elements
* Embedded media

CSS properties without DOCX equivalents don't work: opacity, z-index, flexbox, grid, box-shadow, transforms, gradients.

***

## How it works

Same idea as `react-dom` or `react-native`, but renders to Open XML (the format behind `.docx` files).

Components become document elements. Tailwind classes map to DOCX properties. The renderer handles XML generation, relationship tracking, and ZIP packaging.