Components

List

Display grouped items with UiListGroup and UiListItem.

UiListGroup wraps UiListItem entries. Make items interactive for navigation or selection.

Add a list

<template>
  <UiListGroup>
    <UiListItem title="Inbox" text="12 new" icon="&#xe156;" />
    <UiListItem title="Drafts" icon="&#xe254;" />
    <UiListItem title="Archive" icon="&#xe149;" disabled />
  </UiListGroup>
</template>

Use an image instead of an icon

Pass imageUrl to render an image in place of the icon (it takes precedence over icon), or use the media slot for arbitrary content such as UiIconSvg.

<template>
  <UiListGroup>
    <UiListItem
      title="Jane Cooper"
      text="jane.cooper@example.com"
      image-url="/avatars/jane.jpg"
      image-alt="Jane Cooper avatar"
    />
    <UiListItem title="GitHub" text="@giancarlosgza">
      <template #media>
        <UiIconSvg :content="brandIcons.github" size="sm" />
      </template>
    </UiListItem>
  </UiListGroup>
</template>

Make it interactive

<template>
  <UiListGroup is-interactive variant="flush" size="sm">
    <UiListItem title="Profile" active />
    <UiListItem title="Billing" />
  </UiListGroup>
</template>

Pass to or href to render UiListItem as a link instead of a plain item. The rendered tag defaults to a; override it with as for framework router links (e.g. NuxtLink, RouterLink). Link mode automatically implies the hover / active / arrow styling that UiListGroup's isInteractive prop provides, so you don't need to also set it on the group. disabled strips href/to and blocks pointer events, without changing any markup for items that don't pass a link prop.

<template>
  <UiListGroup>
    <UiListItem title="Dashboard" icon="&#xe88a;" to="/dashboard" />
    <UiListItem title="Colorffy" icon="&#xe157;" href="https://colorffy.com" />
    <UiListItem title="Router link" icon="&#xe88a;" to="/settings" as="router-link" />
    <UiListItem title="Unavailable" icon="&#xe14b;" to="/billing" disabled />
  </UiListGroup>
</template>

UiListGroup props

Prop	Type	Default	Description
`variant`	`'flush' \| 'low-contrast'`	—	Surface style.
`size`	`'sm' \| 'md'`	—	Item size.
`isInteractive`	`boolean`	`false`	Hover / active styles.
`isUndecorated`	`boolean`	`false`	Hide the interactive arrow indicator.
`customClass`	`string \| string[] \| Record<string, boolean> \| null`	—	Extra classes.

UiListItem props

Prop	Type	Default	Description
`title`	`string \| null`	—	Primary text.
`text`	`string \| null`	—	Supporting text.
`icon`	`string \| null`	—	Leading Material Symbols code.
`imageUrl`	`string \| null`	—	Image rendered in place of the icon (takes precedence over `icon`).
`imageAlt`	`string \| null`	`''`	Alt text for the image (empty = decorative).
`customImageClass`	`string \| string[] \| Record<string, boolean> \| null`	—	Extra classes for the image (e.g. `rounded-full`).
`active`	`boolean`	`false`	Active styling.
`disabled`	`boolean`	`false`	Disable the item. Strips `href`/`to` and blocks pointer events in link mode.
`hasActions`	`boolean`	`false`	Layout for trailing actions.
`to`	`string \| object \| null`	—	Navigation destination. Activates link mode.
`href`	`string \| null`	—	Standard `href` for link mode (e.g. external links).
`as`	`string \| object \| null`	`'a'`	Tag/component rendered in link mode (e.g. `'router-link'`, `'nuxt-link'`). Ignored unless `to` or `href` is set.

Slots: media replaces the whole image/icon area; list-action renders trailing actions when hasActions is set.

Edit this pageorReport an issue

Layout

Structure pages with header and pane content containers.

Indicate loading with spinner, expressive, and shape loaders.