Item

A composable list item component for rendering structured content like user lists, file lists, or settings rows. Each item can include media (icons or images), a title, description, actions, and header/footer areas. Items can be grouped in an ItemGroup with optional separators.

Item Title

A short description of this item.

Another Item

Another description goes here.

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

export default function ItemDemo() {
  return (
    <ItemGroup>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Item Title</ItemTitle>
          <ItemDescription>A short description of this item.</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Another Item</ItemTitle>
          <ItemDescription>Another description goes here.</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}

Anatomy

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

<ItemGroup>
  <Item>
    <ItemMedia variant="icon">
      <FileIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Document.pdf</ItemTitle>
      <ItemDescription>Uploaded 2 days ago</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="ghost" size="icon-sm">
        <MoreHorizontalIcon />
      </Button>
    </ItemActions>
  </Item>
</ItemGroup>

Examples

Basic item

<Item>
  <ItemContent>
    <ItemTitle>Notification settings</ItemTitle>
    <ItemDescription>Choose how you want to be notified.</ItemDescription>
  </ItemContent>
</Item>

With icon media

Use variant="icon" on ItemMedia for a compact icon layout.

<Item>
  <ItemMedia variant="icon">
    <BellIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Notifications</ItemTitle>
    <ItemDescription>Manage your notification preferences.</ItemDescription>
  </ItemContent>
</Item>

With image media

Use variant="image" on ItemMedia for avatar or thumbnail images.

<Item>
  <ItemMedia variant="image">
    <img src="/avatars/user.png" alt="User" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Jane Smith</ItemTitle>
    <ItemDescription>jane@example.com</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">View</Button>
  </ItemActions>
</Item>

Grouped items with separators

<ItemGroup>
  <Item variant="outline">
    <ItemContent>
      <ItemTitle>General</ItemTitle>
      <ItemDescription>Basic account settings.</ItemDescription>
    </ItemContent>
  </Item>
  <ItemSeparator />
  <Item variant="outline">
    <ItemContent>
      <ItemTitle>Security</ItemTitle>
      <ItemDescription>Password and two-factor authentication.</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>

API Reference

Item

The root item container. Supports a custom render prop via Base UI's useRender.

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "muted"`	`"default"`	Visual style. `"outline"` adds a border, `"muted"` adds a subtle background.
`size`	`"default" \| "sm" \| "xs"`	`"default"`	Controls padding and gap sizing.
`render`	`RenderProp`	—	Custom render prop to change the underlying element (e.g. render as an `<a>` or `<button>`).
`className`	`string`	—
`children`	`ReactNode`	—

ItemMedia

A container for an icon, image, or avatar positioned at the start of the item.

Prop	Type	Default	Description
`variant`	`"default" \| "icon" \| "image"`	`"default"`	`"icon"` constrains SVG size, `"image"` adds a fixed-size overflow-hidden container for images.
`className`	`string`	—
`children`	`ReactNode`	—

ItemContent

A flex column that holds the title and description, taking up remaining horizontal space.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemTitle

The primary text of the item. Rendered as a single-line-clamped <div>.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemDescription

Secondary text below the title, rendered in muted foreground color and clamped to two lines.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemActions

A flex container for action buttons or controls at the end of the item.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemHeader

A full-width row at the top of the item for header content, using justify-between.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemFooter

A full-width row at the bottom of the item for footer content, using justify-between.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemGroup

A <div> with role="list" that vertically stacks items with consistent gap spacing. Gap adjusts automatically based on child item sizes.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ItemSeparator

A horizontal Separator between items with vertical margin.

Prop	Type	Default
`className`	`string`	—