Item

A versatile component for displaying content with media, title, description, and actions.

Basic item

A simple item with title and description

Installation

pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/item.json

Usage

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

<ItemGroup>
  <Item>
    <ItemMedia variant="icon">
      <IconComponent />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Title</ItemTitle>
      <ItemDescription>Description text</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button>Action</Button>
    </ItemActions>
  </Item>
</ItemGroup>

Examples

Variants

The Item component supports three visual variants: default, outline, and muted.

Default variant

Transparent background with no border

Outline variant

Outlined style with a visible border

Muted variant

Muted background for secondary content

Avatar

Combine with Avatar to represent users.

Frank Grinaert

Lead Designer

Giorgi Kapanadze

Lead Engineer

Cassandra Sarfo

Solution Architect

API reference

Item

The main container for an item.

Prop	Type	Default	Description
`variant`	`"default"` \| `"outline"` \| `"muted"`	`"default"`	Visual style of the item
`size`	`"default"` \| `"sm"`	`"default"`	Size of the item
`asChild`	`boolean`	`false`	Render as child element
`className`	`string`	-	Additional CSS classes

ItemGroup

Container for multiple items with list semantics.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemMedia

Container for icons, images, or avatars.

Prop	Type	Default	Description
`variant`	`"default"` \| `"icon"` \| `"image"`	`"default"`	Style of the media container
`className`	`string`	-	Additional CSS classes

ItemContent

Container for the main content (title and description).

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemTitle

The title or primary text of the item.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemDescription

Supporting text or description for the item.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemActions

Container for action buttons or interactive elements.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemHeader

Optional header section for the item.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemFooter

Optional footer section for the item.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemSeparator

Visual separator between items.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Changelog

21 July 2026: updated "muted" background for better visibility
6 July 2026: added explicit "border-border" class

Item

On this page