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. Group it with the ItemGroup component to create a list of items.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add item

Usage

<template>
  <UiItem>
    <UiItemHeader>Item Header</UiItemHeader>
    <UiItemMedia />
    <UiItemContent>
      <UiItemTitle>Item</UiItemTitle>
      <UiItemDescription>Item</UiItemDescription>
    </UiItemContent>
    <UiItemActions />
    <UiItemFooter>Item Footer</UiItemFooter>
  </UiItem>
</template>

Item vs Field

Use Field if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use Item.

Examples

Basic

Basic Item

A simple item with title and description.

Your profile has been verified.

Variants

Default Variant

Standard styling with subtle background and borders.

Outline Variant

Outlined style with clear borders and transparent background.

Muted Variant

Subdued appearance with muted colors for secondary content.

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.