Item

A composable list-item primitive with media, title, description, action, and separator slots — for settings rows, navigation entries, and richer lists.

Install

npx shadcn@latest add https://atomx.acau.net/r/item.json

Installing item also pulls in Separator.

Compose Item from ItemMedia (optional icon/image), ItemContent (title + description), and ItemActions (trailing buttons or controls). Wrap a list in ItemGroup and divide rows with ItemSeparator. Use variant="outline" for a bordered card-style row or variant="muted" for a tinted background; switch between size="default" and size="sm". Pass asChild to render the item as a link or button.

<ItemGroup>
  <Item variant="outline">
    <ItemMedia variant="icon"><User /></ItemMedia>
    <ItemContent>
      <ItemTitle>Profile</ItemTitle>
      <ItemDescription>Personal information</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm">Edit</Button>
    </ItemActions>
  </Item>
</ItemGroup>

Preview

Settings list

Profile

Manage your personal information.

Notifications and digests.

Muted variant, small size

Plan: Free

Upgrade anytime for more features.

Props

Component	Extends	Notes
`Item`	`<div>`	`variant` is `"default"`, `"outline"`, or `"muted"`. `size` is `"default"` or `"sm"`. Accepts `asChild`.
`ItemGroup`	`<div>`	`role="list"` container.
`ItemSeparator`	`Separator`	Horizontal divider between items.
`ItemMedia`	`<div>`	`variant` is `"default"`, `"icon"` (rounded muted tile), or `"image"`.
`ItemContent`	`<div>`	Wraps title + description.
`ItemTitle`	`<div>`	Primary text.
`ItemDescription`	`<p>`	Secondary text (line-clamped to 2).
`ItemActions`	`<div>`	Trailing actions.
`ItemHeader`	`<div>`	Optional full-width header row.
`ItemFooter`	`<div>`	Optional full-width footer row.