Item

Installation

npx baseui-cn add item

Usage

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

<ItemGroup>
  <Item>
    <ItemMedia variant="icon">
      <FileIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>File name</ItemTitle>
      <ItemDescription>Description text</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm">Action</Button>
    </ItemActions>
  </Item>
</ItemGroup>

Examples

Basic

Simple items with title and description in a group.

With media

Items with avatar icons and status indicators.

With image

Items featuring product images.

Variants

Default, outline, and muted item styles.

With header and footer

Rich item layout with header actions and footer interactions.

Sizes

Items in default, sm, and xs sizes.

API

Item

ItemMedia