Item

Item Title

Item description goes here

Outline Variant

This item has an outline variant

Muted Variant

This item has a muted variant

---
import { Icon } from "@/components/ui/icon"
import {
  Item,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
---

<div class="grid w-full max-w-sm gap-2">
  <Item>
    <ItemMedia>
      <Icon name="heart" class="size-4" />
    </ItemMedia>
    <div class="min-w-0 flex-1">
      <ItemTitle>Item Title</ItemTitle>
      <ItemDescription>Item description goes here</ItemDescription>
    </div>
  </Item>
  <Item variant="outline">
    <ItemMedia>
      <Icon name="star" class="size-4" />
    </ItemMedia>
    <div class="min-w-0 flex-1">
      <ItemTitle>Outline Variant</ItemTitle>
      <ItemDescription>This item has an outline variant</ItemDescription>
    </div>
  </Item>
  <Item variant="muted">
    <ItemMedia>
      <Icon name="info" class="size-4" />
    </ItemMedia>
    <div class="min-w-0 flex-1">
      <ItemTitle>Muted Variant</ItemTitle>
      <ItemDescription>This item has a muted variant</ItemDescription>
    </div>
  </Item>
</div>

Installation

To install the item component, run the following command:

npx shadcn@latest add @fulldev/item

Usage

import {
  Item,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

<Item>
  <ItemMedia>
    <Icon name="heart" />
  </ItemMedia>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</Item>