---
title: Item
description: A versatile component that you can use to display any content.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemDemo() {
	<div class="flex w-full max-w-md flex-col gap-6">
		@item.Item(item.Props{Variant: item.VariantOutline}) {
			@item.Content() {
				@item.Title() {
					Basic Item
				}
				@item.Description() {
					A simple item with title and description.
				}
			}
			@item.Actions() {
				@button.Button(button.Props{
					Variant: button.VariantOutline,
					Size:    button.SizeSm,
				}) {
					Action
				}
			}
		}
		@item.Item(item.Props{
			Variant: item.VariantOutline,
			Size:    item.SizeSm,
			Href:    "#",
		}) {
			@item.Media() {
				@icon.BadgeCheck(icon.Props{Class: "size-5"})
			}
			@item.Content() {
				@item.Title() {
					Your profile has been verified.
				}
			}
			@item.Actions() {
				@icon.ChevronRight(icon.Props{Class: "size-4"})
			}
		}
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add item
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="item" title="components/item/item.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/item"
```

```templ showLineNumbers
@item.Item() {
	@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
		@icon.Star()
	}
	@item.Content() {
		@item.Title() {
			Title
		}
		@item.Description() {
			Description
		}
	}
	@item.Actions() {
		@button.Button() {
			Action
		}
	}
}
```

## Composition

Use the following composition to build an `Item`:

```text
item.Group
└── item.Item
    ├── item.Header
    ├── item.Media
    ├── item.Content
    │   ├── item.Title
    │   └── item.Description
    ├── item.Actions
    └── item.Footer
```

## Item vs Field

Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use `Item`.

## Variant

Use the `Variant` prop to change the visual style of the item.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemVariant() {
	<div class="flex w-full max-w-md flex-col gap-6">
		@item.Item() {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.Inbox()
			}
			@item.Content() {
				@item.Title() {
					Default Variant
				}
				@item.Description() {
					Transparent background with no border.
				}
			}
		}
		@item.Item(item.Props{Variant: item.VariantOutline}) {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.Inbox()
			}
			@item.Content() {
				@item.Title() {
					Outline Variant
				}
				@item.Description() {
					Outlined style with a visible border.
				}
			}
		}
		@item.Item(item.Props{Variant: item.VariantMuted}) {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.Inbox()
			}
			@item.Content() {
				@item.Title() {
					Muted Variant
				}
				@item.Description() {
					Muted background for secondary content.
				}
			}
		}
	</div>
}
```

## Size

Use the `Size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemSizeDemo() {
	<div class="flex w-full max-w-md flex-col gap-6">
		@item.Item(item.Props{Variant: item.VariantOutline}) {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.Inbox()
			}
			@item.Content() {
				@item.Title() {
					Default Size
				}
				@item.Description() {
					The standard size for most use cases.
				}
			}
		}
		@item.Item(item.Props{
			Variant: item.VariantOutline,
			Size:    item.SizeSm,
		}) {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.Inbox()
			}
			@item.Content() {
				@item.Title() {
					Small Size
				}
				@item.Description() {
					A compact size for dense layouts.
				}
			}
		}
		@item.Item(item.Props{
			Variant: item.VariantOutline,
			Size:    item.SizeXs,
		}) {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.Inbox()
			}
			@item.Content() {
				@item.Title() {
					Extra Small Size
				}
				@item.Description() {
					The most compact size available.
				}
			}
		}
	</div>
}
```

## Icon

Use `item.Media` with `Variant: item.MediaVariantIcon` to display an icon.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemIcon() {
	<div class="flex w-full max-w-lg flex-col gap-6">
		@item.Item(item.Props{Variant: item.VariantOutline}) {
			@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
				@icon.ShieldAlert()
			}
			@item.Content() {
				@item.Title() {
					Security Alert
				}
				@item.Description() {
					New login detected from unknown device.
				}
			}
			@item.Actions() {
				@button.Button(button.Props{
					Size:    button.SizeSm,
					Variant: button.VariantOutline,
				}) {
					Review
				}
			}
		}
	</div>
}
```

## Avatar

You can use `item.Media` to display an avatar.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemAvatar() {
	<div class="flex w-full max-w-lg flex-col gap-6">
		@item.Item(item.Props{Variant: item.VariantOutline}) {
			@item.Media() {
				@avatar.Avatar(avatar.Props{Class: "size-10"}) {
					@avatar.Image(avatar.ImageProps{Src: "https://github.com/axadrn.png"})
					@avatar.Fallback() {
						AA
					}
				}
			}
			@item.Content() {
				@item.Title() {
					Axel Adrian
				}
				@item.Description() {
					Last seen 5 months ago
				}
			}
			@item.Actions() {
				@button.Button(button.Props{
					Size:       button.SizeIconSm,
					Variant:    button.VariantOutline,
					Class:      "rounded-full",
					Attributes: templ.Attributes{"aria-label": "Invite"},
				}) {
					@icon.Plus()
				}
			}
		}
		@item.Item(item.Props{Variant: item.VariantOutline}) {
			@item.Media() {
				@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {
					@avatar.Avatar(avatar.Props{Class: "hidden sm:flex"}) {
						@avatar.Image(avatar.ImageProps{
							Src: "https://github.com/a-h.png",
							Alt: "@a-h",
						})
						@avatar.Fallback() {
							AH
						}
					}
					@avatar.Avatar(avatar.Props{Class: "hidden sm:flex"}) {
						@avatar.Image(avatar.ImageProps{
							Src: "https://github.com/joerdav.png",
							Alt: "@joerdav",
						})
						@avatar.Fallback() {
							JD
						}
					}
					@avatar.Avatar() {
						@avatar.Image(avatar.ImageProps{
							Src: "https://github.com/mvdan.png",
							Alt: "@mvdan",
						})
						@avatar.Fallback() {
							DM
						}
					}
				}
			}
			@item.Content() {
				@item.Title() {
					No Team Members
				}
				@item.Description() {
					Invite your team to collaborate on this project.
				}
			}
			@item.Actions() {
				@button.Button(button.Props{
					Size:    button.SizeSm,
					Variant: button.VariantOutline,
				}) {
					Invite
				}
			}
		}
	</div>
}
```

## Image

Use `item.Media` with `Variant: item.MediaVariantImage` to display an image.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/item"

type itemSong struct {
	Title    string
	Artist   string
	Album    string
	Duration string
}

templ ItemImage() {
	{{
		music := []itemSong{
			{
				Title:    "Midnight City Lights",
				Artist:   "Neon Dreams",
				Album:    "Electric Nights",
				Duration: "3:45",
			},
			{
				Title:    "Coffee Shop Conversations",
				Artist:   "The Morning Brew",
				Album:    "Urban Stories",
				Duration: "4:05",
			},
			{
				Title:    "Digital Rain",
				Artist:   "Cyber Symphony",
				Album:    "Binary Beats",
				Duration: "3:30",
			},
		}
	}}
	<div class="flex w-full max-w-md flex-col gap-6">
		@item.Group(item.GroupProps{Class: "gap-4"}) {
			for _, song := range music {
				@item.Item(item.Props{
					Variant: item.VariantOutline,
					Href:    "#",
				}) {
					@item.Media(item.MediaProps{Variant: item.MediaVariantImage}) {
						<img
							src={ "https://avatar.vercel.sh/" + song.Title }
							alt={ song.Title }
							class="object-cover grayscale"
						/>
					}
					@item.Content() {
						@item.Title(item.TitleProps{Class: "line-clamp-1"}) {
							{ song.Title } -
							<span class="text-muted-foreground">{ song.Album }</span>
						}
						@item.Description() {
							{ song.Artist }
						}
					}
					@item.Content(item.ContentProps{Class: "flex-none text-center"}) {
						@item.Description() {
							{ song.Duration }
						}
					}
				}
			}
		}
	</div>
}
```

## Group

Use `item.Group` to group related items together.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

type itemPerson struct {
	Username string
	Avatar   string
	Email    string
}

templ ItemGroupExample() {
	{{
		people := []itemPerson{
			{
				Username: "axadrn",
				Avatar:   "https://github.com/axadrn.png",
				Email:    "axel@example.com",
			},
			{
				Username: "a-h",
				Avatar:   "https://github.com/a-h.png",
				Email:    "adrian@example.com",
			},
			{
				Username: "joerdav",
				Avatar:   "https://github.com/joerdav.png",
				Email:    "joe@example.com",
			},
		}
	}}
	@item.Group(item.GroupProps{Class: "max-w-sm"}) {
		for _, person := range people {
			@item.Item(item.Props{Variant: item.VariantOutline}) {
				@item.Media() {
					@avatar.Avatar() {
						@avatar.Image(avatar.ImageProps{
							Src:   person.Avatar,
							Class: "grayscale",
						})
						@avatar.Fallback() {
							{ person.Username[:1] }
						}
					}
				}
				@item.Content(item.ContentProps{Class: "gap-1"}) {
					@item.Title() {
						{ person.Username }
					}
					@item.Description() {
						{ person.Email }
					}
				}
				@item.Actions() {
					@button.Button(button.Props{
						Variant: button.VariantGhost,
						Size:    button.SizeIcon,
						Class:   "rounded-full",
					}) {
						@icon.Plus()
					}
				}
			}
		}
	}
}
```

## Header

Use `item.Header` to add a header above the item content.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/item"

type itemModel struct {
	Name        string
	Description string
	Image       string
}

templ ItemHeaderDemo() {
	{{
		models := []itemModel{
			{
				Name:        "v0-1.5-sm",
				Description: "Everyday tasks and UI generation.",
				Image:       "https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop",
			},
			{
				Name:        "v0-1.5-lg",
				Description: "Advanced thinking or reasoning.",
				Image:       "https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop",
			},
			{
				Name:        "v0-2.0-mini",
				Description: "Open Source model for everyone.",
				Image:       "https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop",
			},
		}
	}}
	<div class="flex w-full max-w-xl flex-col gap-6">
		@item.Group(item.GroupProps{Class: "grid grid-cols-3 gap-4"}) {
			for _, model := range models {
				@item.Item(item.Props{Variant: item.VariantOutline}) {
					@item.Header() {
						<img
							src={ model.Image }
							alt={ model.Name }
							class="aspect-square w-full rounded-sm object-cover"
						/>
					}
					@item.Content() {
						@item.Title() {
							{ model.Name }
						}
						@item.Description() {
							{ model.Description }
						}
					}
				}
			}
		}
	</div>
}
```

## Link

Set the `Href` prop to render the item as a link. The hover and focus states will be applied to the anchor element.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemLink() {
	<div class="flex w-full max-w-md flex-col gap-4">
		@item.Item(item.Props{Href: "#"}) {
			@item.Content() {
				@item.Title() {
					Visit our documentation
				}
				@item.Description() {
					Learn how to get started with our components.
				}
			}
			@item.Actions() {
				@icon.ChevronRight(icon.Props{Class: "size-4"})
			}
		}
		@item.Item(item.Props{
			Variant: item.VariantOutline,
			Href:    "#",
			Target:  "_blank",
		}) {
			@item.Content() {
				@item.Title() {
					External resource
				}
				@item.Description() {
					Opens in a new tab with security attributes.
				}
			}
			@item.Actions() {
				@icon.ExternalLink(icon.Props{Class: "size-4"})
			}
		}
	</div>
}
```

```templ showLineNumbers
@item.Item(item.Props{Href: "/dashboard"}) {
	@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
		@icon.House()
	}
	@item.Content() {
		@item.Title() {
			Dashboard
		}
		@item.Description() {
			Overview of your account and activity.
		}
	}
}
```

## Dropdown

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/avatar"
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/item"
)

templ ItemDropdown() {
	{{
		people := []itemPerson{
			{
				Username: "axadrn",
				Avatar:   "https://github.com/axadrn.png",
				Email:    "axel@example.com",
			},
			{
				Username: "a-h",
				Avatar:   "https://github.com/a-h.png",
				Email:    "adrian@example.com",
			},
			{
				Username: "joerdav",
				Avatar:   "https://github.com/joerdav.png",
				Email:    "joe@example.com",
			},
		}
	}}
	@dropdownmenu.DropdownMenu() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dropdownmenu.Trigger(ctx),
		}) {
			Select
			@icon.ChevronDown()
		}
		@dropdownmenu.Content(dropdownmenu.ContentProps{
			Class: "w-48",
			Align: dropdownmenu.AlignEnd,
		}) {
			@dropdownmenu.Group() {
				for _, person := range people {
					@dropdownmenu.Item() {
						@item.Item(item.Props{
							Size:  item.SizeXs,
							Class: "w-full p-2",
						}) {
							@item.Media() {
								@avatar.Avatar(avatar.Props{Class: "size-[1.625rem]"}) {
									@avatar.Image(avatar.ImageProps{
										Src:   person.Avatar,
										Class: "grayscale",
									})
									@avatar.Fallback() {
										{ person.Username[:1] }
									}
								}
							}
							@item.Content(item.ContentProps{Class: "gap-0"}) {
								@item.Title() {
									{ person.Username }
								}
								@item.Description(item.DescriptionProps{Class: "leading-none"}) {
									{ person.Email }
								}
							}
						}
					}
				}
			}
		}
	}
}
```

## API Reference

### Item

The main component for displaying content with media, title, description, and actions. It renders as a link when `Href` is set.

| Prop      | Type                                               | Default          |
| --------- | -------------------------------------------------- | ---------------- |
| `Variant` | `VariantDefault \| VariantOutline \| VariantMuted` | `VariantDefault` |
| `Size`    | `SizeDefault \| SizeSm \| SizeXs`                  | `SizeDefault`    |
| `Href`    | `string`                                           | -                |
| `Class`   | `string`                                           | -                |

### ItemGroup

A container that groups related items together with consistent styling.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Group() {
	@item.Item()
	@item.Item()
}
```

### ItemSeparator

A separator between items in a group.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Group() {
	@item.Item()
	@item.Separator()
	@item.Item()
}
```

### ItemMedia

Use `item.Media` to display media content such as icons, images, or avatars.

| Prop      | Type                                                           | Default               |
| --------- | --------------------------------------------------------------- | --------------------- |
| `Variant` | `MediaVariantDefault \| MediaVariantIcon \| MediaVariantImage` | `MediaVariantDefault` |
| `Class`   | `string`                                                        | -                     |

```templ
@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {
	@icon.ShieldAlert()
}
```

```templ
@item.Media(item.MediaProps{Variant: item.MediaVariantImage}) {
	<img src="..." alt="..."/>
}
```

### ItemContent

Wraps the title and description of the item.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Content() {
	@item.Title() {
		Title
	}
	@item.Description() {
		Description
	}
}
```

### ItemTitle

Displays the title of the item.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Title() {
	Item Title
}
```

### ItemDescription

Displays the description of the item.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Description() {
	Item description
}
```

### ItemActions

Container for action buttons or other interactive elements.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Actions() {
	@button.Button() {
		Action
	}
}
```

### ItemHeader

Displays a header above the item content.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Item() {
	@item.Header() {
		Header
	}
	@item.Content() {
		// ...
	}
}
```

### ItemFooter

Displays a footer below the item content.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@item.Item() {
	@item.Content() {
		// ...
	}
	@item.Footer() {
		Footer
	}
}
```