Shadcn Item

An item is a flex row: media on the left, a title and description in the middle, actions on the right. Use it for settings, notifications, files, and people. If the row hosts an input, that is a Field.

Usage

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

<Item variant="outline">
  <ItemMedia variant="icon">
    <InboxIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Inbox</ItemTitle>
    <ItemDescription>New messages from your team.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">Open</Button>
  </ItemActions>
</Item>

variant is default, outline, or muted. render={<a href="…" />} turns the row into a link.

Composition

Variant

default is transparent. outline draws a border. muted fills the row.

Size

size="sm" is the dense row. Default is the comfortable list size.

Icon

ItemMedia variant="icon" is the boxed glyph. It lines up with the title when a description is present.

Avatar

Default ItemMedia plus an Avatar. Leave variant off.

Image

variant="image" plus an <img>. Use it for albums, files, and products.

Group

ItemGroup is role="list". Slide ItemSeparator between rows.

Header

ItemHeader is a full-width row above the title. Use it for a cover image.

Link

render={<a href="…" />} plus the label as children. Hover and focus land on the anchor.

Dropdown

Drop an Item inside a Dropdown Menu item for a face, a name, and an email.

RTL

Wrap with DirectionProvider and dir="rtl". Copy is Arabic; the chevron flips.

API

ItemMedia

ItemGroup sets role="list". ItemSeparator is a Separator. The rest take className.

Notes

Keep descriptions to one idea. The two-line clamp is a layout guard, not a place to hide a paragraph.

With other components

Questions

Related