Item

Item represents a single record in a list, combining an icon or image with title, description, and optional actions. Use ItemGroup to compose multiple Items into a scannable list.

Use variant="outline" for separated cards and variant="muted" for a softer row highlight. Use image media when the record is visually identified by a logo, avatar, or product image.

Basic usage

Code

<Item variant="outline">
  <ItemMedia variant="icon">
    <FileIcon />
  </ItemMedia>

  <ItemContent>
    <ItemTitle>Document.pdf</ItemTitle>
    <ItemDescription>Modified 2 hours ago</ItemDescription>
  </ItemContent>

  <ItemActions>
    <Button variant="ghost" size="icon-sm" aria-label="More actions">
      <MoreHorizontalIcon />
    </Button>
  </ItemActions>
</Item>

Group

Code

<ItemGroup>
  <Item variant="outline">
    <ItemMedia variant="icon">
      <FileIcon />
    </ItemMedia>

    <ItemContent>
      <ItemTitle>Report.xlsx</ItemTitle>
      <ItemDescription>Yesterday</ItemDescription>
    </ItemContent>
  </Item>

  <Item variant="outline">
    <ItemMedia variant="icon">
      <FileIcon />
    </ItemMedia>

    <ItemContent>
      <ItemTitle>Presentation.pptx</ItemTitle>
      <ItemDescription>Yesterday</ItemDescription>
    </ItemContent>
  </Item>

  <Item variant="outline">
    <ItemMedia variant="icon">
      <FileIcon />
    </ItemMedia>

    <ItemContent>
      <ItemTitle>Budget.csv</ItemTitle>
      <ItemDescription>Yesterday</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>

Image Media

Code

<Item variant="muted">
  <ItemMedia variant="image">
    <img src="https://placehold.co/40x40" alt="Green Valley Farm" />
  </ItemMedia>

  <ItemContent>
    <ItemTitle>Green Valley Farm</ItemTitle>
    <ItemDescription>Preferred account · 12 open orders</ItemDescription>
  </ItemContent>

  <ItemActions>
    <Button variant="outline" size="sm">
      View account
    </Button>
  </ItemActions>
</Item>

Sections

Code

<ItemGroup>
  <Item size="sm">
    <ItemHeader>
      <ItemTitle>ORD-1042</ItemTitle>
      <Badge variant="default">Confirmed</Badge>
    </ItemHeader>

    <ItemContent>
      <ItemDescription>Green Valley Farm · $12,450.00</ItemDescription>
    </ItemContent>

    <ItemFooter>
      <span className="tw:text-sm tw:text-muted-foreground">
        Delivery Friday
      </span>
      <Button variant="ghost" size="sm">
        Review
      </Button>
    </ItemFooter>
  </Item>

  <ItemSeparator />

  <Item size="sm">
    <ItemContent>
      <ItemTitle>ORD-1043</ItemTitle>
      <ItemDescription>
        North Ridge Acres · awaiting confirmation
      </ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>

API

Item

Name	Type/Description
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
size = "default"	"default" | "sm" | "xs" | null | undefined
variant = "default"	"default" | "outline" | "muted" | null | undefined

ItemActions

No documented props

ItemContent

No documented props

ItemDescription

No documented props

ItemFooter

No documented props

ItemGroup

No documented props

ItemHeader

No documented props

ItemMedia

Name	Type/Description
variant = "default"	"image" | "default" | "icon" | null | undefined

ItemSeparator

Name	Type/Description
className	string | ((state: SeparatorState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
orientation = "'horizontal'"	Orientation | undefined The orientation of the separator.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.

ItemTitle

No documented props