Avatar

Visual representation of a user through images or initials.

Source Tailwind Javascript

package showcase

import "github.com/axzilla/templui/internal/components/avatar"

templ AvatarDefault() {
	@avatar.Avatar() {
		@avatar.Image(avatar.ImageProps{
			Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
		})
	}
}

Installation

Install the component
```
templui add avatar
```
Add the JavaScript to your layout
```
@avatar.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Fallback

package showcase

import "github.com/axzilla/templui/internal/components/avatar"

templ AvatarFallback() {
	@avatar.Avatar() {
		@avatar.Image(avatar.ImageProps{
			// simulate a broken image
			Src: "broken-image.jpg",
		})
		@avatar.Fallback() {
			{ avatar.Initials("John Doe") }
		}
	}
}

Sizes

package showcase

import "github.com/axzilla/templui/internal/components/avatar"

templ AvatarSizes() {
	<div class="flex flex-wrap gap-2">
		@avatar.Avatar(avatar.Props{
			Size: avatar.SizeSm,
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
		@avatar.Avatar(avatar.Props{
			Size: avatar.SizeLg,
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
	</div>
}

With Icon

package showcase

import (
	"github.com/axzilla/templui/internal/components/avatar"
	"github.com/axzilla/templui/internal/components/icon"
)

templ AvatarWithIcon() {
	@avatar.Avatar() {
		@icon.Camera(icon.Props{
			Size:  22,
			Class: "text-muted-foreground",
		})
	}
}

Group

package showcase

import "github.com/axzilla/templui/internal/components/avatar"

templ AvatarGroup() {
	@avatar.Group(avatar.GroupProps{
		Spacing: avatar.GroupSpacingLg,
	}) {
		@avatar.Avatar(avatar.Props{
			InGroup: true,
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
		@avatar.Avatar(avatar.Props{
			InGroup: true,
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
		@avatar.Avatar(avatar.Props{
			InGroup: true,
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
		@avatar.GroupOverflow(2, avatar.Props{
			InGroup: true,
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
			})
		}
	}
}

API Reference

Required parameter

Hover for description

Avatar

Root container for avatar component that manages fallback behavior and styling.

Name	Type	Default
`ID` Unique identifier for the avatar element.	`string`	-
`Class` Additional CSS classes to apply to the avatar.	`string`	-
`Attributes` Additional HTML attributes to apply to the avatar element.	`templ.Attributes`	-
`Size` Size of the avatar. Options: 'small', 'medium', 'large'.	`Size`	`medium`
`InGroup` Indicates if the avatar is part of a group layout.	`bool`	`false`

Image

Image element within the avatar that displays the user's photo.

Name	Type	Default
`ID` Unique identifier for the image element.	`string`	-
`Class` Additional CSS classes to apply to the image.	`string`	-
`Attributes` Additional HTML attributes to apply to the image element.	`templ.Attributes`	-
`Src` Image source URL.	`string`	-
`Alt` Alternative text for the image.	`string`	-

Fallback

Fallback element displayed when the image fails to load, typically showing initials or an icon.

Name	Type	Default
`ID` Unique identifier for the fallback element.	`string`	-
`Class` Additional CSS classes to apply to the fallback.	`string`	-
`Attributes` Additional HTML attributes to apply to the fallback element.	`templ.Attributes`	-

Group

Container for displaying multiple avatars in a group layout.

Name	Type	Default
`ID` Unique identifier for the group element.	`string`	-
`Class` Additional CSS classes to apply to the group.	`string`	-
`Attributes` Additional HTML attributes to apply to the group element.	`templ.Attributes`	-
`Spacing` Spacing between avatars in the group.	`Spacing`	`SpacingMd`

Menu

Getting Started

Components

Avatar

Installation

Examples

API Reference

Avatar

Image

Fallback

Group