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.
app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      ul: {
        base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
      },
      li: {
        base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          ul: {
            base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
          },
          li: {
            base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
          }
        }
      }
    })
  ]
})

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.
app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      ol: {
        base: 'list-decimal ps-6 my-5 marker:text-muted'
      },
      li: {
        base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          ol: {
            base: 'list-decimal ps-6 my-5 marker:text-muted'
          },
          li: {
            base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
          }
        }
      }
    })
  ]
})

Nested lists

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

  • 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

Mixed lists

You can combine ordered and unordered lists for complex hierarchies.

  1. First major step
    • Sub-requirement A
    • Sub-requirement B
  2. Second major step
    • Another sub-item
    • Final sub-item
  3. Final step

Tables

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

PropDefaultType
namestring
sizemdstring
colorneutralstring
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'
        }
      },
      thead: {
        base: 'bg-muted'
      },
      tbody: {
        base: ''
      },
      tr: {
        base: '[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md'
      },
      th: {
        base: 'py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-muted'
      },
      td: {
        base: 'py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          table: {
            slots: {
              root: 'relative my-5 overflow-x-auto',
              base: 'w-full border-separate border-spacing-0 rounded-md'
            }
          },
          thead: {
            base: 'bg-muted'
          },
          tbody: {
            base: ''
          },
          tr: {
            base: '[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md'
          },
          th: {
            base: 'py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-muted'
          },
          td: {
            base: 'py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
          }
        }
      }
    })
  ]
})

Headers and text

Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.

Images and embeds

Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.