Item

A versatile row for media, title, description, and actions.

A straightforward flex container for nearly any content — title, description, and actions. Group with ItemGroup for lists. Use Field when the row is a form control; use Item when it is display content (including multiline SelectOption.Content).

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add item

Usage

open demo ↗

lotusui.Item(th, lotusui.ItemProps{
	Variant: lotusui.ItemOutline,
	Content: lotusui.ItemContent(th,
		lotusui.ItemTitle(th, "Basic Item"),
		lotusui.ItemDescription(th, "A simple item with title and description."),
	),
	Actions: lotusui.ItemActions(th,
		lotusui.Button(th, &action, "Action", lotusui.ButtonProps{Variant: lotusui.ButtonOutline, Size: lotusui.SizeSM}),
	),
})

Variant

Variant selects default (transparent), outline, or muted chrome.

open demo ↗

lotusui.Item(th, lotusui.ItemProps{Variant: lotusui.ItemOutline, …})
lotusui.Item(th, lotusui.ItemProps{Variant: lotusui.ItemMuted, …})

Size

Shared Size enum — MD default, SM → sm, XS → xs (shadcn's three sizes).

open demo ↗

lotusui.Item(th, lotusui.ItemProps{Size: lotusui.SizeSM, …})

Icon

ItemMedia with ItemMediaIcon wraps an icon in a muted well.

open demo ↗

Media: lotusui.ItemMedia(th, lotusui.ItemMediaIcon, lotusui.SVGIcon(lotusui.IconLock, 18, ink))

Avatar

Pass an Avatar as ItemMediaDefault content.

open demo ↗

Media: lotusui.ItemMedia(th, lotusui.ItemMediaDefault, lotusui.Avatar(th, lotusui.AvatarProps{Initials: "ER"}))

Image

ItemMediaImage clips the slot to a rounded square.

open demo ↗

Media: lotusui.ItemMedia(th, lotusui.ItemMediaImage, imageWidget)

Group

ItemGroup stacks related items; optional ItemSeparator between them.

open demo ↗

lotusui.ItemGroup(th, item1, item2, item3)

Header

ItemHeader spans the full width above the main columns — model cards, media tiles.

open demo ↗

Header: lotusui.ItemHeader(th, media, nil)

Link

Set Btn to make the whole row clickable (shadcn's render prop). Hover fills like a HoverRow. Opening URLs is the caller's job — see OpenURL when you need the system browser.

open demo ↗

lotusui.Item(th, lotusui.ItemProps{Btn: &go, Content: …, Actions: …})

From the web

shadcn's render/asChild polymorphism and RTL demo are web-document concerns — Gio uses an explicit Btn slot and the platform's text direction. Dropdown-on-item is composition with DropdownMenu.

API

Option	Type	Description
`ItemProps.Variant`	`ItemVariant`	ItemDefault, ItemOutline, ItemMuted.
`ItemProps.Size`	`Size`	Padding scale; MD default, SM/XS match shadcn sm/xs.
`ItemProps.Btn`	`*widget.Clickable`	Nil = static; set for whole-row click/hover.
`ItemProps.Header/Media/Content/Actions/Footer`	`layout.Widget`	Build-time slots; nil omitted.
`ItemMedia(th, variant, content)`	`func`	Leading well — Default / Icon / Image.
`ItemContent / ItemTitle / ItemDescription`	`func`	Text column helpers.
`ItemActions / ItemHeader / ItemFooter`	`func`	Trailing and full-width bands.
`ItemGroup / ItemSeparator`	`func`	Stacked list + hairline.