List - React Docx

Ordered and unordered lists with nesting support.

<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

<Ul>
  <Li>Apples</Li>
  <Li>Oranges</Li>
  <Li>Bananas</Li>
</Ul>

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

Ordered lists

<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

Nest a list inside the item it belongs to, or directly inside the parent list. Up to 9 levels; each nested list starts its own count.

<Ol>
  <Li>
    Prepare
    <Ul>
      <Li>Gather requirements</Li>
    </Ul>
  </Li>
  <Li>Build</Li>
</Ol>

Placing the nested list directly in the parent list also works:

<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:

<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

<Ul>
  <Li className="font-bold">Important item</Li>
  <Li className="text-gray-500">Less important</Li>
</Ul>

With formatted text

<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

<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

<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

​Components

​Unordered lists

​Ordered lists

​Nesting

​Mixed nesting

​Styling

​List items

​With formatted text

​Common patterns

​Definition-style

​Steps with details

​Limitations