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

Interactive Item compositions use one solid 2px keyboard outline. Keep a meaningful link or button in render when the whole row performs an action.

For manual installation, copy the stylesheet included with the component source and retain its import. CLI installation includes it automatically; website CSS is not required.