Item

A versatile component that you can use to display any content.

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions.

You can pretty much achieve the same result with the div element and some classes, but it's been built so many times that it made sense to create a component for it.

Examples

Default

Basic Item A simple item with title and description. Action Your profile has been verified. 
<c-item variant="outline">
  <c-item-content>
    <c-item-title>Basic Item</c-item-title>
    <c-item-description
      >A simple item with title and description.</c-item-description
    >
  </c-item-content>
  <c-item-action>
    <c-button variant="outline" size="sm">Action</c-button>
  </c-item-action>
</c-item>

<c-item variant="outline" size="sm">
  <c-item-icon>
    <docs-lucide-icon icon="badge-check" size="20"></docs-lucide-icon>
  </c-item-icon>
  <c-item-content>
    <c-item-title>Your profile has been verified.</c-item-title>
  </c-item-content>
  <c-item-action>
    <docs-lucide-icon icon="chevron-right" size="16"></docs-lucide-icon>
  </c-item-action>
</c-item>

Variants

Default Variant Standard styling with subtle background and borders. Open Outline Variant Outlined style with clear borders and transparent background. Open Muted Variant Subdued appearance with muted colors for secondary content. Open 
<c-item>
  <c-item-content>
    <c-item-title>Default Variant</c-item-title>
    <c-item-description
      >Standard styling with subtle background and borders.</c-item-description
    >
  </c-item-content>
  <c-item-action>
    <c-button variant="outline" size="sm">Open</c-button>
  </c-item-action>
</c-item>

<c-item variant="outline">
  <c-item-content>
    <c-item-title>Outline Variant</c-item-title>
    <c-item-description
      >Outlined style with clear borders and transparent
      background.</c-item-description
    >
  </c-item-content>
  <c-item-action>
    <c-button variant="outline" size="sm">Open</c-button>
  </c-item-action>
</c-item>

<c-item variant="muted">
  <c-item-content>
    <c-item-title>Muted Variant</c-item-title>
    <c-item-description
      >Subdued appearance with muted colors for secondary
      content.</c-item-description
    >
  </c-item-content>
  <c-item-action>
    <c-button variant="outline" size="sm">Open</c-button>
  </c-item-action>
</c-item>

Size

The Item component has different sizes for different use cases. For example, you can use the sm size for a compact item or the default size for a standard item.

Basic Item A simple item with title and description. Action Your profile has been verified. 
<c-item variant="outline">
  <c-item-content>
    <c-item-title>Basic Item</c-item-title>
    <c-item-description
      >A simple item with title and description.</c-item-description
    >
  </c-item-content>
  <c-item-action>
    <c-button variant="outline" size="sm">Action</c-button>
  </c-item-action>
</c-item>

<c-item variant="outline" size="sm">
  <c-item-icon>
    <docs-lucide-icon icon="badge-check" size="20"></docs-lucide-icon>
  </c-item-icon>
  <c-item-content>
    <c-item-title>Your profile has been verified.</c-item-title>
  </c-item-content>
  <c-item-action>
    <docs-lucide-icon icon="chevron-right" size="16"></docs-lucide-icon>
  </c-item-action>
</c-item>

Icon

Security Alert New login detected from unknown device. Review 
<c-item variant="outline">
  <c-item-icon>
    <docs-lucide-icon icon="shield-alert" size="16"></docs-lucide-icon>
  </c-item-icon>
  <c-item-content>
    <c-item-title>Security Alert</c-item-title>
    <c-item-description
      >New login detected from unknown device.</c-item-description
    >
  </c-item-content>
  <c-item-action>
    <c-button size="sm" variant="outline">Review</c-button>
  </c-item-action>
</c-item>

Avatar

ER Evil Rabbit Last seen 5 months ago 
<c-item variant="outline">
  <c-item-icon>
    <c-avatar avatar-classes="size-10">
      <c-avatar-image src="https://github.com/evilrabbit.png"></c-avatar-image>
      <c-avatar-fallback>ER</c-avatar-fallback>
    </c-avatar>
  </c-item-icon>
  <c-item-content>
    <c-item-title>Evil Rabbit</c-item-title>
    <c-item-description>Last seen 5 months ago</c-item-description>
  </c-item-content>
  <c-item-action>
    <c-button
      size="icon"
      variant="outline"
      button-classes="rounded-full"
      aria-label="Invite"
    >
      <docs-lucide-icon icon="plus" size="16"></docs-lucide-icon>
    </c-button>
  </c-item-action>
</c-item>

API Reference

Item

The root container for the item component family.

Prop Type Default Description
variant 'default' | 'outline' | 'muted' 'default' Visual style variant
size 'default' | 'sm' 'default' Size of the item
item-classes string - Additional CSS classes for the item container

ItemIcon

Leading icon or media slot.

Prop Type Default Description
item-icon-classes string - Additional CSS classes for the icon container

ItemContent

Main content area containing title and description.

Prop Type Default Description
item-content-classes string - Additional CSS classes for the content container

ItemTitle

Primary text for the item.

Prop Type Default Description
item-title-classes string - Additional CSS classes for the title element

ItemDescription

Secondary/muted text for the item.

Prop Type Default Description
item-description-classes string - Additional CSS classes for the description text

ItemAction

Trailing action slot for buttons, badges, or other interactive elements.

Prop Type Default Description
item-action-classes string - Additional CSS classes for the action container