Item

A flexible list item component for displaying content with media, actions, and metadata. Compose with ItemMedia, ItemContent, ItemTitle, ItemDescription, and ItemActions.

Title and description overflow

ItemTitle defaults to overflow="clamp" (one-line clamp, flex so a trailing badge can sit on the title). Use overflow="ellipsis" for a single-line truncated label in a width-constrained row. Ellipsis is exclusive of line-clamp and flex — mixing those with truncate hard-clips, especially in WebKit.

ItemDescription defaults to size="sm" and overflow="clamp" (two-line clamp). Use size="xs" overflow="ellipsis" for a compact one-line meta row (SKU, email) under the title.

Basic

With Media

PreviewCode

Profile

View and edit your profile information.

John Doe

john.doe@example.com

Tile

A muted well behind an icon, logo, or skeleton; sized by the Item.

Variants

Sizes

Item Group

With Actions

Clickable item

Use ItemOverlayAction when the whole Item should trigger one action. It renders a real <button> whose overlay covers the Item, so the Item’s content stays plain text: valid markup and a concise accessible name (give the button an aria-label). The Item shows the hover and focus ring. Don’t render the Item itself as a <button>, and don’t nest other controls without lifting them above the overlay (relative z-10).