---
title: "Lists and tables"
description: "Organize information with styled lists and responsive tables for clear, consistent readability."
canonical_url: "https://ui.nuxt.com/docs/typography/lists-and-tables"
last_updated: "2026-05-07"
---
# Lists and tables

> Organize information with styled lists and responsive tables for clear, consistent readability.

## Lists

Markdown supports unordered, ordered, and nested lists for various content needs.

### Unordered lists

Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.

- I'm a list item.
- I'm another list item.
- I'm the last list item.

```mdc
- I'm a list item.
- I'm another list item.
- I'm the last list item.
```

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      ul: {
        base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
      }
    }
  }
})
```

### Ordered lists

Use ordered lists when item order matters, like steps in a process. Start each item with a number.

1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.

```mdc
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
```

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      ol: {
        base: 'list-decimal ps-6 my-5 marker:text-muted'
      }
    }
  }
})
```

### Nested lists

Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.

```vue
<template>
  <ul>
  <li>
  I'm a list item.
  
  <ul>
  <li>
  I'm a nested list item.</li>
  <li>
  I'm another nested list item.</li></ul></li>
  <li>
  I'm another list item.
  
  <ul>
  <li>
  Another nested item
  <ul>
  <li>
  Deep nested item</li>
  <li>
  Another deep nested item</li></ul></li>
  <li>
  Back to second level</li></ul></li></ul>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=- I'm a list item.
    - I'm a nested list item.
    - I'm another nested list item.
  - I'm another list item.
    - Another nested item
      - Deep nested item
      - Another deep nested item
    - Back to second level
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I'm a list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   I'm a nested list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   I'm another nested list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   I'm another list item.
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   Another nested item
  </span></span>
  <span class=line>
  <span class=sMK4o>
      -</span>
  <span class=sTEyZ>
   Deep nested item
  </span></span>
  <span class=line>
  <span class=sMK4o>
      -</span>
  <span class=sTEyZ>
   Another deep nested item
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   Back to second level
  </span></span></code></pre></template>
</template>
```

### Mixed lists

You can combine ordered and unordered lists for complex hierarchies.

```vue
<template>
  <ol>
  <li>
  First major step
  <ul>
  <li>
  Sub-requirement A</li>
  <li>
  Sub-requirement B</li></ul></li>
  <li>
  Second major step
  <ul>
  <li>
  Another sub-item</li>
  <li>
  Final sub-item</li></ul></li>
  <li>
  Final step</li></ol>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=1. First major step
     - Sub-requirement A
     - Sub-requirement B
  2. Second major step
     - Another sub-item
     - Final sub-item
  3. Final step
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  1.</span>
  <span class=sTEyZ>
   First major step
  </span></span>
  <span class=line>
  <span class=sMK4o>
     -</span>
  <span class=sTEyZ>
   Sub-requirement A
  </span></span>
  <span class=line>
  <span class=sMK4o>
     -</span>
  <span class=sTEyZ>
   Sub-requirement B
  </span></span>
  <span class=line>
  <span class=sMK4o>
  2.</span>
  <span class=sTEyZ>
   Second major step
  </span></span>
  <span class=line>
  <span class=sMK4o>
     -</span>
  <span class=sTEyZ>
   Another sub-item
  </span></span>
  <span class=line>
  <span class=sMK4o>
     -</span>
  <span class=sTEyZ>
   Final sub-item
  </span></span>
  <span class=line>
  <span class=sMK4o>
  3.</span>
  <span class=sTEyZ>
   Final step
  </span></span></code></pre></template>
</template>
```

## Tables

Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        md
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        neutral
      </code>
    </td>
    
    <td>
      <code className="language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" language="ts-type" style="">
        <span class="sBMFI">
          string
        </span>
      </code>
    </td>
  </tr>
</tbody>
</table>

```mdc
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
```

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      table: {
        slots: {
          root: 'relative my-5 overflow-x-auto',
          base: 'w-full border-separate border-spacing-0 rounded-md'
        }
      }
    }
  }
})
```


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.