List

An Alixan UI list row with leading, title, description and trailing areas.

Installation

npx alixan-ui-nuxt add list

Click

Passing a click handler makes ListTile a button and adds pointer, hover and keyboard focus styles automatically.

<script setup lang="ts">
import { ChevronRight } from '@lucide/vue';

const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];

const toast = useToast();
const openContact = () => toast.open('list.profileOpened', 'info');
</script>

<List divider="inset">
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
    @click="openContact"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
    <template #trailing><ChevronRight class="size-5" /></template>
  </ListTile>
</List>

Trailing Actions

Aruzhan Sarsenova

+7 701 123 45 67

Daniyar Aliyev

+7 702 234 56 78

Aidana Nurlankyzy

+7 705 345 67 89

<script setup lang="ts">
import { Pencil, Trash2 } from '@lucide/vue';

const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];

const toast = useToast();
const editProfile = () => toast.open('list.editStarted', 'info');
const deleteProfile = () => toast.open('list.deleteStarted', 'warning');
</script>

<List>
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
    <template #trailing>
      <IconButton :tooltip="$t('list.edit')" variant="outlined" size="sm" @click="editProfile">
        <Pencil />
      </IconButton>
      <IconButton :tooltip="$t('list.delete')" variant="outlined" color="destructive" size="sm" @click="deleteProfile">
        <Trash2 />
      </IconButton>
    </template>
  </ListTile>
</List>

Border

Inset adds an Alixan UI divider aligned with the content. Block wraps every ListTile in its own bordered surface.

Inset

Aruzhan Sarsenova

+7 701 123 45 67

Daniyar Aliyev

+7 702 234 56 78

Aidana Nurlankyzy

+7 705 345 67 89

<script setup lang="ts">
const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];
</script>

<List divider="inset">
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
  </ListTile>
</List>

Block

Aruzhan Sarsenova

+7 701 123 45 67

Daniyar Aliyev

+7 702 234 56 78

Aidana Nurlankyzy

+7 705 345 67 89

<script setup lang="ts">
const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];
</script>

<List divider="block">
  <ListTile
    v-for="contact in contacts"
    :key="contact.title"
    :title="contact.title"
    :description="contact.description"
  >
    <template #leading>
      <img :src="contact.image" alt="" loading="lazy" class="size-12 rounded-full object-cover" />
    </template>
  </ListTile>
</List>

API Reference

Prop	Type	Default	Description
divider	'inset' \| 'block'	'inset'	Uses inset Alixan UI dividers or renders every tile as a separate block.

Prop	Type	Default	Description
title	string	-	Primary row text.
description	string	-	Optional supporting row text.
@click	(event: MouseEvent) => void	-	Makes the tile interactive and enables pointer, hover and keyboard focus states.

Prop	Type	Default	Description
leading	slot	-	Content displayed before the text, such as an icon or avatar.
title	slot	-	Custom title content.
description	slot	-	Custom description content.
trailing	slot	-	Content displayed after the text, such as a value or chevron.