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.
How text works in React DOCX and when to use each component.
The basics
Three ways to add text:
// 1. Plain string (auto-wrapped)
<Paragraph>Hello world</Paragraph>
// 2. Text component (for styling)
<Paragraph>
<Text className="font-bold">Hello</Text> world
</Paragraph>
// 3. Formatting shortcuts
<Paragraph>
<Bold>Hello</Bold> world
</Paragraph>
When to use what
Plain strings
For unstyled text. No wrapper needed:
<Paragraph>This is plain text.</Paragraph>
<H1>Plain heading</H1>
<Li>Plain list item</Li>
Text component
When you need styling:
<Paragraph>
Status: <Text className="text-green-600 font-bold">Active</Text>
</Paragraph>
<Paragraph>
This is <Bold>bold</Bold>, <Italic>italic</Italic>,
<Underline>underlined</Underline>, and <Strike>struck</Strike>.
</Paragraph>
Mixing styles
Combine multiple styles in one paragraph:
<Paragraph>
<Text className="font-bold">Important:</Text> This is
<Text className="text-red-600"> critical</Text> information.
</Paragraph>
<Paragraph>
<Bold>
<Italic>Bold and italic</Italic>
</Bold>
</Paragraph>
<Bold className="text-blue-600">Bold and blue</Bold>
Text containers
These components can contain text:
| Component | Purpose |
|---|
Paragraph | Body text |
H1-H6 | Headings |
Li | List items |
Td / Th | Table cells |
Link | Hyperlinks |
<H1>Plain heading</H1>
<H1><Text className="text-blue-600">Styled heading</Text></H1>
<Li>Plain item</Li>
<Li><Bold>Bold item</Bold></Li>
<Td>Plain cell</Td>
<Td><Text className="text-right">Aligned cell</Text></Td>
Common patterns
Label + value
<Paragraph>
<Text className="font-bold">Name: </Text>John Doe
</Paragraph>
<Paragraph>
<Text className="font-bold">Email: </Text>john@example.com
</Paragraph>
Status indicators
<Paragraph>
Status: <Text className="text-green-600 font-bold">✓ Active</Text>
</Paragraph>
<Paragraph>
Status: <Text className="text-red-600 font-bold">✗ Inactive</Text>
</Paragraph>
<Paragraph>
Status: <Text className="text-yellow-600 font-bold">⏳ Pending</Text>
</Paragraph>
Highlighted text
<Paragraph>
The <Text className="bg-yellow-200">key finding</Text> is documented below.
</Paragraph>
Small print
<Paragraph>
Price: $99.00
<Text className="text-xs text-gray-500"> (excl. tax)</Text>
</Paragraph>
Inline code
<Paragraph>
Run <Text className="font-mono bg-gray-100">npm install</Text> to begin.
</Paragraph>
Superscript / subscript
<Paragraph>
Water is H<Text className="align-sub text-xs">2</Text>O.
</Paragraph>
<Paragraph>
E = mc<Text className="align-super text-xs">2</Text>
</Paragraph>
Style inheritance
Styles flow from parent to child:
<Document className="font-serif">
<Section>
<Paragraph>
This inherits font-serif from Document.
</Paragraph>
<Paragraph className="font-sans">
This overrides to font-sans.
</Paragraph>
</Section>
</Document>
<Paragraph className="text-gray-500">
Gray text with <Text className="text-black">black override</Text>.
</Paragraph>
Special characters
Line breaks
<Paragraph>
Line one<BreakLine />
Line two
</Paragraph>
Tabs
<Paragraph>
Name:<Tab />John Doe
</Paragraph>
| Style | Class | Shortcut |
|---|
| Bold | font-bold | <Bold> |
| Italic | italic | <Italic> |
| Underline | underline | <Underline> |
| Strikethrough | line-through | <Strike> |
| All caps | uppercase | — |
| Small caps | capitalize | — |
| Superscript | align-super text-xs | — |
| Subscript | align-sub text-xs | — |
Anti-patterns
Unnecessary Text wrappers
// ✖ Don't do this
<Paragraph>
<Text>Plain text that doesn't need a wrapper</Text>
</Paragraph>
// ✓ Do this
<Paragraph>Plain text that doesn't need a wrapper</Paragraph>
Nested paragraphs
// ✖ Won't work
<Paragraph>
<Paragraph>Nested paragraph</Paragraph>
</Paragraph>
// ✓ Use line breaks instead
<Paragraph>
First line<BreakLine />
Second line
</Paragraph>
