Item

The Item component shows users one row of a list, with media, a title, a description, and actions.

Item

INV-2026-014

Sent to Atelier Brume on October 1.

object

When to Use

for a record in a short list, such as a contact with an email address and a Button that adds them to a project
as a link to one record or one page, where the whole row is the target
to show an Avatar, a name, and a second line in a row of a Dropdown Menu
as a tile, with a picture in ItemHeader over the title, for a short set of templates

When Not to Use

for records that users compare across columns (use a Table)
for content with a header and a footer on a surface of its own (use a Card)
for a status message (use an Alert)
for a label, a control, and an error (use a Field)

Anatomy

INV-2026-014

Sent on October 1.

Camille Roy

Jonas Meyer

Element	Usage
Media	Optional
Title	Optional
Actions	Optional
Container	Required
Description	Optional
Group	Optional
Separator	Optional

ItemContent stacks the title and the description, and it fills the width that remains next to the media and the actions. ItemHeader and ItemFooter are each a full row, above and below the other parts.

Variants

Variant	Purpose
`default`	A row in a group, with a separator between rows
`outline`	A single Item component, or a tile in a grid
`muted`	An Item component that is set apart from the page, such as a payment that is processing

ItemMedia has a variant of its own.

Variant	Purpose
`default`	Media with a shape of its own, such as an Avatar
`icon`	An icon
`image`	A picture

At image, the picture is cropped to a square. For a row that waits on a task, place a Spinner in ItemMedia.

Sizes

Size	Height With Two Lines	Placement
`default`	66px	Everywhere else
`sm`	62px	A dense list
`xs`	55px	A row of a Dropdown Menu

Behavior

The Item component is as wide as its container. The media and the actions keep their width, and the content fills the rest.

Truncation

ItemDescription shows two lines and truncates the rest with an ellipsis. The title wraps. Keep a description short enough to fit on two lines because users have no way to read the truncated text. See Typography for the rule on truncation.

INV-2026-014

Sent to Atelier Brume on October 1. Due on October 27.

DoKeep the description short enough to fit on two lines.

INV-2026-014

Sent to Atelier Brume on October 1 and opened twice. Due on October 27 by bank transfer, with a late fee of 2% after November 3.

Don’tWhen the description is longer than two lines, the rest is truncated, and users have no way to read it.

A Value at the End

A second ItemContent after the first doesn’t grow. Use it for a value at the end of the row, like an amount.

Rendered as a Link

To render another element in place of the div, pass it to render. Render the Item component itself as the link so that the whole row is the target.

Tax number verified

DoRender the Item component as the link so that the whole row is the target.

Tax number verified

Don’tWhen only the title is a link, the target is 19px tall, and nothing happens when users click the rest of the row.

Accessibility

The Item component isn’t focusable and has no keys of its own. Users reach the controls in its actions with Tab. When the Item component is rendered as an a with an href, it is one link in the tab order, and users follow it with Enter.

Requirements

Set aria-hidden on an icon in the Item component. See Iconography for the rule.

For an icon-only Button in ItemActions, follow the rule for an icon-only Button. The Button repeats in every row of a list, so name the record in its aria-label, for example “Add Camille Roy to the project”.

Avoid placing a Button in an Item component that is rendered as a link because the HTML Standard allows no interactive content inside an a.

Installation

npx shadcn@latest add @summit/item

The CLI also adds @summit/separator.

Usage

import { Button } from '@/components/ui/button';
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
import { ReceiptIcon } from '@phosphor-icons/react';

<Item variant="outline">
    <ItemMedia variant="icon">
        <ReceiptIcon aria-hidden />
    </ItemMedia>
    <ItemContent>
        <ItemTitle>INV-2026-014</ItemTitle>
        <ItemDescription>Sent to Atelier Brume on October 1.</ItemDescription>
    </ItemContent>
    <ItemActions>
        <Button variant="outline" size="sm">
            View
        </Button>
    </ItemActions>
</Item>;

As a Link

Pass an a to render.

As a Link

import { CaretRightIcon, SealCheckIcon } from '@phosphor-icons/react';

<Item variant="outline" render={<a href="/settings/tax" />}>
    <ItemMedia variant="icon">
        <SealCheckIcon aria-hidden />
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Your tax number is verified</ItemTitle>
    </ItemContent>
    <ItemActions>
        <CaretRightIcon aria-hidden />
    </ItemActions>
</Item>;

In a Group

ItemGroup stacks the Item components. To show a line between two of them, add ItemSeparator.

In a Group

import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import {
    Item,
    ItemContent,
    ItemDescription,
    ItemGroup,
    ItemMedia,
    ItemSeparator,
    ItemTitle,
} from '@/components/ui/item';

<ItemGroup>
    <Item>
        <ItemMedia>
            <Avatar>
                <AvatarFallback>CR</AvatarFallback>
            </Avatar>
        </ItemMedia>
        <ItemContent>
            <ItemTitle>Camille Roy</ItemTitle>
            <ItemDescription>camille@studiolumen.co</ItemDescription>
        </ItemContent>
    </Item>
    <ItemSeparator />
    <Item>
        <ItemMedia>
            <Avatar>
                <AvatarFallback>JM</AvatarFallback>
            </Avatar>
        </ItemMedia>
        <ItemContent>
            <ItemTitle>Jonas Meyer</ItemTitle>
            <ItemDescription>jonas@studiolumen.co</ItemDescription>
        </ItemContent>
    </Item>
</ItemGroup>;

With a Picture and a Value

Set variant="image" on ItemMedia, and place the value in a second ItemContent.

With a Picture and a Value

<Item variant="outline">
    <ItemMedia variant="image">
        <img src="/expenses/site-photography.jpg" alt="" />
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Site photography</ItemTitle>
        <ItemDescription>North Light Studio</ItemDescription>
    </ItemContent>
    <ItemContent>$640.00</ItemContent>
</Item>

As a Tile

ItemHeader fills the full width above the content. To lay out the tiles, set a grid on ItemGroup.

As a Tile

<ItemGroup className="grid grid-cols-3">
    <Item variant="outline">
        <ItemHeader>
            <img src="/templates/classic.png" alt="" className="aspect-square w-full rounded-md object-cover" />
        </ItemHeader>
        <ItemContent>
            <ItemTitle>Classic</ItemTitle>
            <ItemDescription>Serif headings and a ruled table.</ItemDescription>
        </ItemContent>
    </Item>
</ItemGroup>

Place an xs Item inside DropdownMenuItem.

In a Dropdown Menu

import { DropdownMenuItem } from '@/components/ui/dropdown-menu';

<DropdownMenuItem>
    <Item size="xs">
        <ItemMedia>
            <Avatar size="sm">
                <AvatarFallback>CR</AvatarFallback>
            </Avatar>
        </ItemMedia>
        <ItemContent>
            <ItemTitle>Camille Roy</ItemTitle>
            <ItemDescription>camille@studiolumen.co</ItemDescription>
        </ItemContent>
    </Item>
</DropdownMenuItem>;

API Reference

The parts accept the props of their elements. ItemSeparator accepts the props of a Separator and sets orientation="horizontal".

Item

Prop	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'muted'`	`'default'`	The border and the fill
`size`	`'default' \| 'sm' \| 'xs'`	`'default'`	The padding and the gap
`render`	An element or a function that returns one	None	The element to render in place of the `div`

See the Base UI useRender documentation for render.

ItemMedia

Prop	Type	Default	Description
`variant`	`'default' \| 'icon' \| 'image'`	`'default'`	How the media is sized and cropped

Item

When to UseCopy Anchor Link

When Not to UseCopy Anchor Link

AnatomyCopy Anchor Link

VariantsCopy Anchor Link

SizesCopy Anchor Link

BehaviorCopy Anchor Link

TruncationCopy Anchor Link

A Value at the EndCopy Anchor Link

Rendered as a LinkCopy Anchor Link

AccessibilityCopy Anchor Link

RequirementsCopy Anchor Link

InstallationCopy Anchor Link

UsageCopy Anchor Link

As a LinkCopy Anchor Link

In a GroupCopy Anchor Link

With a Picture and a ValueCopy Anchor Link

As a TileCopy Anchor Link

In a Dropdown MenuCopy Anchor Link

API ReferenceCopy Anchor Link

ItemCopy Anchor Link

ItemMediaCopy Anchor Link

On this page

When to Use

When Not to Use

Anatomy

Variants

Sizes

Behavior

Truncation

A Value at the End

Rendered as a Link

Accessibility

Requirements

Installation

Usage

As a Link

In a Group

With a Picture and a Value

As a Tile

In a Dropdown Menu

API Reference

Item

ItemMedia