Item

A flexible list item component for displaying content with media, titles, descriptions, and actions.

Sarah Johnson

Product Designer at TechCorp

Michael Chen

Senior Developer at Innovation Labs

Emma Williams

Marketing Manager at Creative Studio

Installation

pnpm dlx shadcn@latest add https://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.

Marketing campaign

Active project with 12 files

Brand assets

Design resources and logos

Archived documents

Moved to archive last month

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

Item

On this page