Item

Item is a standalone component for displaying a single piece of content. Use with ItemContent, ItemTitle, ItemDescription, etc. for structured content.

Carrara Marble

Stone · Honed

Usage

import { Item, ItemActions, itemAnatomy, ItemContent, ItemDescription, ItemFooter, ItemGroup, itemGroupAnatomy, ItemGroupProps, ItemHeader, ItemMedia, ItemMediaProps, ItemProps, ItemSeparator, ItemTitle } from "@desk/ui/components/item";

Best practices

Structure content with ItemContent/ItemTitle/ItemDescription (plus ItemMedia/ItemActions) rather than raw divs — the compound parts carry the gap and truncation rhythm.
Wrap a set of items in ItemGroup and set the look via its variant (divided/separated/grouped) — Item adapts automatically, so avoid re-styling borders/backgrounds per item.
Use asChild to make the whole item a link/button (e.g. Next <Link>); pass exactly one element child so Slot can merge className — don't wrap the child in a fragment or extra element.
Reach for Item for generic single rows; for files/documents use DocumentList, and for term/value metadata use DescriptionList.

Props

Item

Prop	Type	Description
asChild	`boolean`	Merge props onto the child element instead of rendering a div (Radix Slot) — e.g. to make the whole item a link.
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
variant	`"default" \| "outline" \| "muted" \| "card" \| null \| undefined`

ItemGroup

Prop	Type	Default	Description
ordered	`boolean`	`false`	Render as an ordered `<ol>` instead of a `<ul>`.
ref	`((instance: HTMLUListElement \| null) => void \| (() => void \| { [UNDEFINED_VOID_ONLY]: never; }) \| React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE`
variant	`"grouped" \| "divided" \| "separated" \| null \| undefined`

ItemMedia

Prop	Type	Description
tone	`"neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| null \| undefined`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`
icon	`import("../../tokens/icon-component").IconComponent`	Icon component from lucide-react or any SVG React component.
emphasis	`"outline" \| "solid" \| "ghost" \| "soft" \| null \| undefined`
iconSize	`IconSize \| undefined`	Size of the icon inside the box. Defaults based on box size.
iconClassName	`string`	Additional className for the icon itself.
variant	`"image" \| "default" \| "icon" \| null \| undefined`

ItemSeparator

Prop	Type	Default	Description
variant	`"strong" \| "default" \| "muted" \| "accent"`	`"default"`	Visual weight of the separator line.

Also exports

componentItemActions
constitemAnatomy
componentItemContent
componentItemDescription
componentItemFooter
constitemGroupAnatomy
interfaceItemGroupProps
componentItemHeader
interfaceItemMediaProps
interfaceItemProps
componentItemTitle

Anatomy

Item

item

A flexible content container for displaying structured information

ItemMedia

item-media

Icon, image, or avatar display area

ItemHeader

item-header

Header row spanning full width

ItemContent

item-content

Main content area with title and description

ItemTitle

item-title

Primary heading

ItemDescription

item-description

Secondary text

ItemActions

item-actions

Action buttons or controls

ItemFooter

item-footer

Footer row spanning full width

Composition

Builds on

IconBox, Separator