Skip to main content
Ordered and unordered lists with nesting support. 
<Ul>
  <Li>First item</Li>
  <Li>Second item</Li>
</Ul>

​
Components

ComponentDescription
UlUnordered list (bullets)
OlOrdered list (numbers)
LiList 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

Up to 3 levels deep: 
<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