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

# Tab

Horizontal tab character for spacing.

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

***

## Usage

Adds a tab stop within text:

```tsx theme={"dark"}
<Paragraph>
  Email:<Tab />john@example.com
</Paragraph>
<Paragraph>
  Phone:<Tab />555-1234
</Paragraph>
```

***

## Simple alignment

```tsx theme={"dark"}
<Paragraph>
  Item<Tab />Qty<Tab />Price
</Paragraph>
<Paragraph>
  Widget<Tab />10<Tab />$5.00
</Paragraph>
<Paragraph>
  Gadget<Tab />5<Tab />$12.00
</Paragraph>
```

For complex alignment, use tables instead.

***

## Common patterns

### Label-value pairs

```tsx theme={"dark"}
<Paragraph>
  <Text className="font-bold">Name:</Text><Tab />John Doe
</Paragraph>
<Paragraph>
  <Text className="font-bold">Title:</Text><Tab />Software Engineer
</Paragraph>
<Paragraph>
  <Text className="font-bold">Department:</Text><Tab />Engineering
</Paragraph>
```

### Form fields

```tsx theme={"dark"}
<Paragraph>
  Name:<Tab /><Tab />_______________________
</Paragraph>
<Paragraph>
  Date:<Tab /><Tab />_______________________
</Paragraph>
<Paragraph>
  Signature:<Tab />_______________________
</Paragraph>
```

### Table of contents style

```tsx theme={"dark"}
<Paragraph>
  Introduction<Tab />.<Tab />.<Tab />.<Tab />1
</Paragraph>
<Paragraph>
  Chapter 1<Tab />.<Tab />.<Tab />.<Tab />5
</Paragraph>
```

Use `TableOfContents` component for actual TOCs.

### Code-like formatting

```tsx theme={"dark"}
<Paragraph className="font-mono">
  const name<Tab />= "John";
</Paragraph>
<Paragraph className="font-mono">
  const age<Tab /><Tab />= 30;
</Paragraph>
```
