> ## 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. # Handling Text Elements How text works in React DOCX and when to use each component. *** ## The basics Three ways to add text: ```tsx theme={"dark"} // 1. Plain string (auto-wrapped) Hello world // 2. Text component (for styling) Hello world // 3. Formatting shortcuts Hello world ``` *** ## When to use what ### Plain strings For unstyled text. No wrapper needed: ```tsx theme={"dark"} This is plain text.

Plain heading

  • Plain list item
    • ``` ### Text component When you need styling: ```tsx theme={"dark"} Status: Active ``` ### Formatting shortcuts For common formatting without class names: ```tsx theme={"dark"} This is bold, italic, underlined, and struck. ``` *** ## Mixing styles Combine multiple styles in one paragraph: ```tsx theme={"dark"} Important: This is critical information. ``` Nest formatting shortcuts: ```tsx theme={"dark"} Bold and italic ``` Add classes to shortcuts: ```tsx theme={"dark"} Bold and blue ``` *** ## Text containers These components can contain text: | Component | Purpose | | ----------- | ----------- | | `Paragraph` | Body text | | `H1`-`H6` | Headings | | `Li` | List items | | `Td` / `Th` | Table cells | | `Link` | Hyperlinks | All work the same way: ```tsx theme={"dark"}

    Plain heading

    Styled heading

  • Plain item
  • Bold item
    • Plain cell Aligned cell ``` *** ## Common patterns ### Label + value ```tsx theme={"dark"} Name: John Doe Email: john@example.com ``` ### Status indicators ```tsx theme={"dark"} Status: ✓ Active Status: ✗ Inactive Status: ⏳ Pending ``` ### Highlighted text ```tsx theme={"dark"} The key finding is documented below. ``` ### Small print ```tsx theme={"dark"} Price: $99.00 (excl. tax) ``` ### Inline code ```tsx theme={"dark"} Run npm install to begin. ``` ### Superscript / subscript ```tsx theme={"dark"} Water is H2O. E = mc2 ``` *** ## Style inheritance Styles flow from parent to child: ```tsx theme={"dark"}
    This inherits font-serif from Document. This overrides to font-sans.
    ``` Child styles override parent styles: ```tsx theme={"dark"} Gray text with black override. ``` *** ## Special characters ### Line breaks ```tsx theme={"dark"} Line one Line two ``` ### Tabs ```tsx theme={"dark"} Name:John Doe ``` *** ## Formatting reference | Style | Class | Shortcut | | ------------- | --------------------- | ------------- | | Bold | `font-bold` | `` | | Italic | `italic` | `` | | Underline | `underline` | `` | | Strikethrough | `line-through` | `` | | All caps | `uppercase` | — | | Small caps | `capitalize` | — | | Superscript | `align-super text-xs` | — | | Subscript | `align-sub text-xs` | — | *** ## Anti-patterns ### Unnecessary Text wrappers ```tsx theme={"dark"} // ✖ Don't do this Plain text that doesn't need a wrapper // ✓ Do this Plain text that doesn't need a wrapper ``` ### Nested paragraphs ```tsx theme={"dark"} // ✖ Won't work Nested paragraph // ✓ Use line breaks instead First line Second line ```