Item

A flexible item component that can be used for lists, cards, and more.

Examples

Default

Basic Item

A simple item with title and description.

Your profile has been verified.

<script setup lang="ts">
import { BadgeCheckIcon, ChevronRightIcon } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Item variant="outline">
      <ItemContent>
        <ItemTitle>Basic Item</ItemTitle>
        <ItemDescription>
          A simple item with title and description.
        </ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="outline" size="sm">
          Action
        </Button>
      </ItemActions>
    </Item>
    <Item variant="outline" size="sm" as-child>
      <a href="#">
        <ItemMedia>
          <BadgeCheckIcon class="size-5" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Your profile has been verified.</ItemTitle>
        </ItemContent>
        <ItemActions>
          <ChevronRightIcon class="size-4" />
        </ItemActions>
      </a>
    </Item>
  </div>
</template>

Props

Item

Prop	Type	Default	Description
as	string	'div'	The element or component to render as
variant	string	'default'	The variant of the item
size	string	'default'	The size of the item

Slots

Item

Slot	Description
default	The item content

ItemMedia

Slot	Description
default	The media content

ItemContent

Slot	Description
default	The main content

ItemHeader

Slot	Description
default	The header content

ItemTitle

Slot	Description
default	The title content

ItemDescription

Slot	Description
default	The description content

ItemActions

Slot	Description
default	The actions content