shadcn-templ 2.0 beta. Switch to templUI v1
1.7k
New

Item

Previous Next

A versatile component that you can use to display any content.

Basic Item

A simple item with title and description.

Your profile has been verified.
package examples import (

Installation

shadcn-templ add item

Usage

import "github.com/axadrn/shadcn-templ/v2/components/item"
@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:

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.

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

package examples import (

Size

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

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

package examples import (

Icon

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

Security Alert

New login detected from unknown device.

package examples import (

Avatar

You can use item.Media to display an avatar.

AA
Axel Adrian

Last seen 5 months ago

@mvdan DM
No Team Members

Invite your team to collaborate on this project.

package examples import (

Image

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

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

Group

Use item.Group to group related items together.

package examples import (

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

v0-1.5-sm
v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg
v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini
v0-2.0-mini

Open Source model for everyone.

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

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

package examples import (
@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.		}	}}
package examples import (

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 - 
@item.Group() {	@item.Item()	@item.Item()}

ItemSeparator

A separator between items in a group.

Prop Type Default
Class string - 
@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 - 
@item.Media(item.MediaProps{Variant: item.MediaVariantIcon}) {	@icon.ShieldAlert()}
@item.Media(item.MediaProps{Variant: item.MediaVariantImage}) {	<img src="..." alt="..."/>}

ItemContent

Wraps the title and description of the item.

Prop Type Default
Class string - 
@item.Content() {	@item.Title() {		Title	}	@item.Description() {		Description	}}

ItemTitle

Displays the title of the item.

Prop Type Default
Class string - 
@item.Title() {	Item Title}

ItemDescription

Displays the description of the item.

Prop Type Default
Class string - 
@item.Description() {	Item description}

ItemActions

Container for action buttons or other interactive elements.

Prop Type Default
Class string - 
@item.Actions() {	@button.Button() {		Action	}}

ItemHeader

Displays a header above the item content.

Prop Type Default
Class string - 
@item.Item() {	@item.Header() {		Header	}	@item.Content() {		// ...	}}

ItemFooter

Displays a footer below the item content.

Prop Type Default
Class string - 
@item.Item() {	@item.Content() {		// ...	}	@item.Footer() {		Footer	}}
Input OTPKbd