AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Item
A versatile component for displaying content with media, title, description, and actions.
SCshadcn
m@example.com
Admin
JD
Jane Doe
jane@example.com
Member
AB
Alice Brown
alice@example.com
templ
templ ItemDemo() {
<div class="w-full max-w-md divide-y rounded-lg border">
@ui.Item("px-4", nil) {
@ui.ItemMedia("", nil) {
@ui.Avatar("h-10 w-10", nil) {
@ui.AvatarImage("https://github.com/shadcn.png", "shadcn", "", nil)
@ui.AvatarFallback("", nil) {
SC
}
}
}
@ui.ItemContent("", nil) {
@ui.ItemTitle("", nil) {
shadcn
}
@ui.ItemDescription("", nil) {
{ "m@example.com" }
}
}
@ui.ItemActions("", nil) {
@ui.Badge(ui.BadgeVariantSecondary, "", nil) {
Admin
}
}
}
@ui.Item("px-4", nil) {
@ui.ItemMedia("", nil) {
@ui.Avatar("h-10 w-10", nil) {
@ui.AvatarFallback("", nil) {
JD
}
}
}
@ui.ItemContent("", nil) {
@ui.ItemTitle("", nil) {
Jane Doe
}
@ui.ItemDescription("", nil) {
jane@example.com
}
}
@ui.ItemActions("", nil) {
@ui.Badge(ui.BadgeVariantOutline, "", nil) {
Member
}
}
}
@ui.Item("px-4", nil) {
@ui.ItemMedia("", nil) {
@ui.Avatar("h-10 w-10", nil) {
@ui.AvatarFallback("", nil) {
AB
}
}
}
@ui.ItemContent("", nil) {
@ui.ItemTitle("", nil) {
Alice Brown
}
@ui.ItemDescription("", nil) {
alice@example.com
}
}
@ui.ItemActions("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantGhost, ui.ButtonSizeIcon, "h-8 w-8", templ.Attributes{"aria-label": "Options"}) {
@icons.MoreHorizontal(icons.Props{Class: "h-4 w-4"})
}
}
}
</div>
}