Item

Item Title

Item description goes here

Outline Variant

This item has an outline variant

Muted Variant

This item has a muted variant

---
import Heart from "@lucide/astro/icons/heart"
import Info from "@lucide/astro/icons/info"
import Star from "@lucide/astro/icons/star"

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

<div class="grid w-full max-w-sm gap-2">
  <Item>
    <ItemMedia>
      <Heart class="size-4" />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Item Title</ItemTitle>
      <ItemDescription>Item description goes here</ItemDescription>
    </ItemContent>
  </Item>
  <Item variant="outline">
    <ItemMedia>
      <Star class="size-4" />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Outline Variant</ItemTitle>
      <ItemDescription>This item has an outline variant</ItemDescription>
    </ItemContent>
  </Item>
  <Item variant="muted">
    <ItemMedia>
      <Info class="size-4" />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Muted Variant</ItemTitle>
      <ItemDescription>This item has a muted variant</ItemDescription>
    </ItemContent>
  </Item>
</div>

Installation

npx shadcn@latest add @fulldev/item

Usage

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

---
import Heart from "@lucide/astro/icons/heart"
---

<Item>
  <ItemMedia>
    <Heart />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
</Item>

Composition

Use the following composition to build an Item:

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Notes

Use ItemContent to group the title and description instead of hand-rolled wrappers.
Passing href turns the root Item into an anchor, which works well for list rows and navigational cards.
Use variants for emphasis changes before adding custom surface styles.

API Reference

See the GitHub source code for more information on props.

Sidebar