List
Item List
<CListItem />
Set up the itemList prop
Use the label and value to add basic items
Name
Lindsay Walton
Title
Front-end Developer
Role
Member
<template>
    <CListItem :itemList="employeeDetails" />
</template>

<script setup lang="ts">
const employeeDetails = [
    { label: 'Name', value: 'Lindsay Walton' },
    { label: 'Title', value: 'Front-end Developer' },
    { label: 'Role', value: 'Member' },
    //...
];
</script>
Custom Value
Use the slot for custom value
Name
Lindsay Walton
Title
Front-end Developer
Email
Role
Member
Status
Online
<template>
    <CListItem :itemList="employeeDetails">
        <template #value-3="{ list }">
            <UButton 
                :label="list.value.email" variant="link" 
                :padded="false" :ui="{ font: 'font-normal' }"
            >
                <template #trailing>
                    <UIcon name="i-lucide-external-link" class="w-4 h-4" />
                </template>
            </UButton>
        </template>
        <template #value-5="{ list }">
            <UBadge 
                :label="list.value.label" :color="list.value.color" 
                :ui="{ rounded: 'rounded-full' }" 
            />
        </template>
    </CListItem>
</template>

<script setup lang="ts">
const employeeDetails = [
    { label: 'Name', value: 'Lindsay Walton' },
    { label: 'Title', value: 'Front-end Developer' },
    { label: 'Email', value: { email: '[email protected]' } },
    { label: 'Role', value: 'Member' },
    { label: 'Status', value: { label: 'Online', color: 'lime' } },
    //...
];
</script>
Profile List
<CListProfile />
Set up the profiles prop
Use the name role and avatar to add profile
  • Tony Stark
    Student
  • Jane Copper
    Faculty
  • Curt Baker
    Student
  • Anna Smith
    Accounting
  • Jullie Middle
    Faculty
  • Jake Thomas
    Student
<template>
    <CListProfile :profiles="profiles" />
</template>

<script setup lang="ts">
const profiles = [
    { id: 1, name: 'Tony Stark', role: 'Student', avatar: '/photo.jpg' },
    { id: 2, name: 'Jane Copper', role: 'Faculty', avatar: '/photo.jpg' },
    { id: 3, name: 'Curt Baker', role: 'Student', avatar: '/photo.jpg' },
    //...
];
</script>
With Checkbox
Set the checkbox prop to true to add checkbox in each profile
  • Tony Stark
    Student
  • Jane Copper
    Faculty
  • Curt Baker
    Student
  • Anna Smith
    Accounting
  • Jullie Middle
    Faculty
  • Jake Thomas
    Student
<template>
    <CListProfile :profiles="profiles" :checkbox="true" />
</template>

<script setup lang="ts">
const profiles = [
    { id: 1, name: 'Tony Stark', role: 'Student', avatar: '/photo.jpg' },
    { id: 2, name: 'Jane Copper', role: 'Faculty', avatar: '/photo.jpg' },
    { id: 3, name: 'Curt Baker', role: 'Student', avatar: '/photo.jpg' },
    //...
];
</script>

© 2025 Application Name. All Rights Reserved.