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

# Paragraph

Container for text content. The basic building block for document text.

```tsx theme={"dark"}
<Paragraph>Hello world</Paragraph>
```

***

## Props

| Prop        | Type        | Description                              |
| ----------- | ----------- | ---------------------------------------- |
| `children`  | `ReactNode` | Text, formatting elements, links, images |
| `className` | `string`    | Tailwind classes                         |
| `id`        | `string`    | Bookmark ID for internal links           |

***

## Plain text

Strings are automatically converted to text runs:

```tsx theme={"dark"}
// These are equivalent
<Paragraph>Hello world</Paragraph>
<Paragraph><Text>Hello world</Text></Paragraph>
```

No need to wrap plain text in `<Text>`.

***

## Mixed content

Combine text with formatting:

```tsx theme={"dark"}
<Paragraph>
  This is <Text className="font-bold">bold</Text> and this is
  <Text className="italic"> italic</Text>.
</Paragraph>
```

Or use formatting shortcuts:

```tsx theme={"dark"}
<Paragraph>
  This is <Bold>bold</Bold> and this is <Italic>italic</Italic>.
</Paragraph>
```

***

## Styling

### Alignment

```tsx theme={"dark"}
<Paragraph className="text-left">Left aligned</Paragraph>
<Paragraph className="text-center">Centered</Paragraph>
<Paragraph className="text-right">Right aligned</Paragraph>
<Paragraph className="text-justify">Justified text</Paragraph>
```

### Spacing

```tsx theme={"dark"}
<Paragraph className="mt-4">Margin top</Paragraph>
<Paragraph className="mb-4">Margin bottom</Paragraph>
<Paragraph className="mt-8 mb-4">Both</Paragraph>
```

### Indentation

```tsx theme={"dark"}
<Paragraph className="indent-8">First line indent</Paragraph>
<Paragraph className="ml-8">Left indent (whole paragraph)</Paragraph>
<Paragraph className="mr-8">Right indent</Paragraph>
```

### Line height

```tsx theme={"dark"}
<Paragraph className="leading-tight">Tight line spacing</Paragraph>
<Paragraph className="leading-normal">Normal spacing</Paragraph>
<Paragraph className="leading-loose">Loose spacing</Paragraph>
```

### Background

```tsx theme={"dark"}
<Paragraph className="bg-yellow-100">Highlighted paragraph</Paragraph>
```

***

## Special elements

### Line breaks

```tsx theme={"dark"}
<Paragraph>
  First line
  <BreakLine />
  Second line (same paragraph)
</Paragraph>
```

### Tabs

```tsx theme={"dark"}
<Paragraph>
  Name:<Tab />John Doe
</Paragraph>
```

### Page breaks

```tsx theme={"dark"}
<Paragraph>Content before</Paragraph>
<BreakPage />
<Paragraph>Content on new page</Paragraph>
```

***

## With links

```tsx theme={"dark"}
<Paragraph>
  Visit <Link href="https://example.com">our website</Link> for more info.
</Paragraph>
```

***

## Bookmarks

Use `id` to create an anchor for internal links:

```tsx theme={"dark"}
<Paragraph id="section-1">
  <H1>Introduction</H1>
</Paragraph>

{/* Later in the document */}
<Paragraph>
  See <Link href="#section-1">Introduction</Link>.
</Paragraph>
```

***

## What can go inside

* Plain strings (auto-wrapped)
* `Text` with styling
* `Bold`, `Italic`, `Underline`, `Strike`
* `Link`
* `Image` (inline)
* `Tab`, `BreakLine`
* `Variable`
* `PageNumber`

What can't go inside: other `Paragraph` elements, `Table`, `H1`-`H6`.