Item

Default

Media + content + actions.

Usage

Import the parts you need from the component's folder.

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemFooter,
  ItemSeparator,
  ItemGroup,
  ItemHeader,
} from "@/components/ui/item";

Stacked list

Group items inside ItemGroup with ItemSeparator.

Variants

Item supports default, outline, and muted visual styles.

Variant styles

Each variant value paired with a trailing action.

Sizes

Item supports default, sm, and xs padding densities.

With icon

Lead the row with an icon inside ItemMedia variant="icon".

With avatar

ItemMedia holds an Avatar for people and account rows.

With image

ItemMedia variant="image" frames a thumbnail-style placeholder.

Grouped rows

A bordered ItemGroup with several Items divided by ItemSeparator.

Header and footer

ItemHeader and ItemFooter add full-width rows above and below the content.

As a link

Render the whole row as a link with as-child and an anchor element.

With dropdown actions

ItemActions holds a DropdownMenu trigger for per-row menus.

API Reference