Item

A flex row for media, title, description, and actions. Use Item for content lists; use Field when the row wraps a form control.

Basic

Title, description, and optional actions in a flex row.

Installation

CLI

npx @sonojs/ui@latest add item

Also needsnpx @sonojs/ui@latest add separator

Composition

structure

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Usage

item.tsx

import { InboxIcon } from "lucide-react"

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

export function Example() {
  return (
    <Item variant="outline">
      <ItemMedia variant="icon">
        <InboxIcon />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Inbox</ItemTitle>
        <ItemDescription>Review messages and notifications.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm" variant="outline">
          Open
        </Button>
      </ItemActions>
    </Item>
  )
}

Props

Prop	Type	Default	Description
variant	"default" · "outline" · "muted"	"default"	Surface style on `Item`.
size	"default" · "sm"	"default"	Padding and gap density on `Item`.
asChild	boolean	false	Merge props onto the child (e.g. an `<a>`) via Radix Slot.
variant (media)	"default" · "icon" · "image"	"default"	On `ItemMedia` — icon frame or image crop.
className	string	—	Merge extra Tailwind classes on any part.