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

# List

Ordered and unordered lists with nesting support.

```tsx theme={"dark"}
<Ul>
  <Li>First item</Li>
  <Li>Second item</Li>
</Ul>
```

***

## Components

| Component | Description              |
| --------- | ------------------------ |
| `Ul`      | Unordered list (bullets) |
| `Ol`      | Ordered list (numbers)   |
| `Li`      | List item                |

***

## Unordered lists

```tsx theme={"dark"}
<Ul>
  <Li>Apples</Li>
  <Li>Oranges</Li>
  <Li>Bananas</Li>
</Ul>
```

Renders with bullets (filled circle, empty circle, square by nesting level).

***

## Ordered lists

```tsx theme={"dark"}
<Ol>
  <Li>First step</Li>
  <Li>Second step</Li>
  <Li>Third step</Li>
</Ol>
```

Renders with numbers: 1, 2, 3... (then a, b, c... and i, ii, iii... for nested levels).

***

## Nesting

Up to 3 levels deep:

```tsx theme={"dark"}
<Ul>
  <Li>Fruits</Li>
  <Ul>
    <Li>Apples</Li>
    <Li>Oranges</Li>
    <Ul>
      <Li>Navel</Li>
      <Li>Blood orange</Li>
    </Ul>
  </Ul>
  <Li>Vegetables</Li>
</Ul>
```

***

## Mixed nesting

Switch between ordered and unordered at any level:

```tsx theme={"dark"}
<Ol>
  <Li>Planning phase</Li>
  <Ul>
    <Li>Gather requirements</Li>
    <Li>Define scope</Li>
  </Ul>
  <Li>Development phase</Li>
  <Ul>
    <Li>Build features</Li>
    <Li>Write tests</Li>
  </Ul>
</Ol>
```

***

## Styling

### List items

```tsx theme={"dark"}
<Ul>
  <Li className="font-bold">Important item</Li>
  <Li className="text-gray-500">Less important</Li>
</Ul>
```

### With formatted text

```tsx theme={"dark"}
<Ul>
  <Li>
    <Text className="font-bold">Bold label:</Text> normal text
  </Li>
  <Li>
    Status: <Text className="text-green-600">Active</Text>
  </Li>
</Ul>
```

***

## Common patterns

### Definition-style

```tsx theme={"dark"}
<Ul>
  <Li>
    <Text className="font-bold">Term 1: </Text>
    Definition of the first term
  </Li>
  <Li>
    <Text className="font-bold">Term 2: </Text>
    Definition of the second term
  </Li>
</Ul>
```

### Steps with details

```tsx theme={"dark"}
<Ol>
  <Li>Install dependencies</Li>
  <Ul>
    <Li>Run npm install</Li>
    <Li>Verify package.json</Li>
  </Ul>
  <Li>Configure settings</Li>
  <Ul>
    <Li>Create .env file</Li>
    <Li>Set API keys</Li>
  </Ul>
  <Li>Start the application</Li>
</Ol>
```

***

## Limitations

* Maximum 3 nesting levels
* Fixed bullet/number styles per level
* No custom starting numbers
* No custom bullet symbols