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>

Make it interactive

<template>
  <UiListGroup is-interactive variant="flush" size="sm">
    <UiListItem title="Profile" active />
    <UiListItem title="Billing" />
  </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.
`active`	`boolean`	`false`	Active styling.
`disabled`	`boolean`	`false`	Disable the item.
`hasActions`	`boolean`	`false`	Layout for trailing actions.

Edit this pageorReport an issue

Layout

Structure pages with header and pane content containers.

Indicate loading with spinner, expressive, and shape loaders.