Item

Shows one entry as a row with an icon, a title, a description and actions.

Library

What’s this?

Acme Corporation

Customer · Manufacturing · San Francisco

2 opportunities closed this quarter

Installation

pnpm dlx shadcn@latest add @wisty/item

The CLI installs the Radix or Base UI file to match your project, with what it builds on: separator.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with ItemBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

To show one entry as a row: a name, a line of detail and an action, like a record, a file or a person.
To list a few records, like related records or search results, with ItemGroup.
To link a row to its record from the title, with an <a> in ItemTitle.
To show a short record summary with a header and footer, like an opportunity with its stage and amount.

Don't use it

Many records with several fields to compare. Use Table or Data table.
A summary with a header, body and footer actions that stands on its own. Use Card.
A choice in a menu. Use Dropdown menu's items.
An empty list. Use Empty.
A form control with its label, help text or error. Use Field.

Usage

ItemGroup
├── Item
│   ├── ItemMedia
│   ├── ItemContent
│   │   ├── ItemTitle
│   │   └── ItemDescription
│   └── ItemActions
├── ItemSeparator
└── Item

ItemHeader and ItemFooter add full-width rows above and below the content, as the Header and footer example shows.

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item"

<Item variant="outline">
  <ItemContent>
    <ItemTitle>Rose Gonzalez</ItemTitle>
    <ItemDescription>SVP, Procurement · Edge Communications</ItemDescription>
  </ItemContent>
</Item>

In an ItemGroup, give each Item role="listitem", as the Group example shows. To link a record, put an <a> in ItemTitle. A whole item can be the link too: asChild with an <a> child in Radix projects, render={<a href="…" />} in Base UI projects.

Examples

Group

Three accounts in an `ItemGroup`, each with `role="listitem"`, and an `ItemSeparator` between them instead of gaps.

Acme Corporation

Customer · San Francisco

Global Media

Prospect · New York

Edge Communications

Customer · Austin

Variants

Each `variant` on `Item`: `default`, `outline` and `muted`.

Edge Emergency Generator

Prospecting · $75,000 · Closes Nov 12, 2026

United Oil Installations

Negotiation · $270,000 · Closes Dec 3, 2026

Grand Hotels Guest Portal

Proposal · $90,000 · Closes Jan 20, 2027

Sizes

Each `size` on `Item`, `default`, `sm` and `xs`, with icon media and an icon button.

Generator won't start

Case 00001026 · High priority

Billing address change

Case 00001027 · Medium priority

Password reset

Media

An Avatar in `ItemMedia`, an icon with `variant="icon"`, and an image with `variant="image"`.

Grace Hopper

VP of Operations, Acme Corporation

Acme Corporation

Customer · Manufacturing

Jordan Lee

Account Executive, Global Media

Header and footer

An opportunity with its title and a badge in `ItemHeader`, and an amount and a button in `ItemFooter`.

Edge Installation

Negotiation

Edge Communications · Closes Dec 15, 2026

$120,000

API reference

Part	Built on
`ItemGroup`	`<div>` (opens in a new tab)
`ItemSeparator`	Separator
`Item`	`<div>` (opens in a new tab)
`ItemMedia`	`<div>` (opens in a new tab)
`ItemContent`	`<div>` (opens in a new tab)
`ItemTitle`	`<div>` (opens in a new tab)
`ItemDescription`	`<p>` (opens in a new tab)
`ItemActions`	`<div>` (opens in a new tab)
`ItemHeader`	`<div>` (opens in a new tab)
`ItemFooter`	`<div>` (opens in a new tab)

`Item`

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "muted"`	`"default"`
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`asChild`	`boolean`	`false`	Renders the child element in its place, with the props merged onto it.

`ItemMedia`

Prop	Type	Default
`variant`	`"default" \| "icon" \| "image"`	`"default"`

SLDS mapping

Item is an SLDS tile (slds-tile) on the media object (slds-media slds-media_center). ItemMedia is slds-media__figure, ItemTitle is slds-tile__title slds-truncate, ItemDescription is slds-tile__detail slds-text-body_small slds-text-color_weak and ItemActions is slds-media__figure_reverse. ItemGroup spaces items like slds-tile + slds-tile, or like slds-has-dividers_bottom when it holds ItemSeparators. ItemHeader and ItemFooter have no SLDS part.

Known gaps:

SLDS's divided list (slds-has-dividers_bottom-space) pads items less on wide screens than on narrow ones. Items keep one size; xs matches the wide one.
Items keep a transparent 1px border, so a bare item is 1px larger on each side than an SLDS tile.

Prop	Value	SLDS	Notes
`variant`	`default`	`slds-tile slds-media`	No border or fill. A linked item turns gray on hover, like slds-has-list-interactions.
`variant`	`outline`	`slds-box`	A linked item takes slds-box_link's accent border and inset ring on hover and focus.
`variant`	`muted`	`slds-box slds-theme_shade`	Keeps the box's 1px border, as SLDS does. It differs from outline by its gray fill.
`size`	`default`	`slds-box, slds-media`	16px padding, 12px between parts.
`size`	`sm`	`slds-box_small, slds-media_small`	12px padding, 8px between parts.
`size`	`xs`	`slds-box_x-small, slds-media_small`	8px padding, 8px between parts.
`ItemMedia variant`	`default`	`slds-media__figure`	Holds an avatar, icon or image at its own size.
`ItemMedia variant`	`icon`	`slds-icon_container`	A gray container with SLDS's default icon color: 32, 24 or 20px by item size. A rounded square (8px corners in Cosmos, 4px in Lightning Blue), like Empty's icon. White on a muted item.
`ItemMedia variant`	`image`	`slds-avatar_medium, _small, _x-small`	32, 24 or 20px by item size, with the avatar's corners.

Accessibility

ItemGroup has role="list". Each Item in it needs role="listitem", or the list is invalid.
Name icon-only buttons with aria-label, like "Follow Acme Corporation". Give images in ItemMedia an alt; lucide icons are hidden on their own.
ItemTitle isn't a heading. Put an <h3> in it when the page outline needs one.
A linked item's whole text becomes the link's name. Keep it short.
ItemSeparator is hidden from assistive technology, so it doesn't break the list.
Contrast: in Lightning Blue, a muted item's description is about 4.2:1, the same as SLDS's slds-theme_shade with slds-text-color_weak. Links in a muted item are below 4.5:1 there too, so keep links out of muted items.

Responsive behavior

An item fills its container's width. The content takes the free space and the actions keep their size.
The title stays on one line and ends in an ellipsis, also in a header beside a badge. A title that holds a badge or an icon wraps instead, so neither is cut off.
The description stops at two lines with an ellipsis.

Rules

Put ItemSeparator between items, not after the last one.
Put the record name in ItemTitle and one short line in ItemDescription.
Use ItemMedia variant="icon" with a lucide icon, or an Avatar for people. For a Salesforce object's colored icon, put Icon in a plain ItemMedia, as Related list does.
In a Card, put the ItemGroup in the Card itself, not in CardContent, and give each Item className="px-(--card-spacing-inline)", so its text lines up with the card's title.
Use outline for a standalone item and default in a list with separators.

Installation

When to use

Use it

Don't use it

Usage

Examples

Group

Variants

Sizes

Media

Header and footer

API reference

Item

ItemMedia

SLDS mapping

Accessibility

Responsive behavior

Rules

Related

`Item`

`ItemMedia`