Avatar

Visual representation of a user through images or initials.

Source Tailwind CSS JavaScript

package showcase

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

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

Installation

templui add avatar

Load the script once in your layout:

<head>
  @avatar.Script()
</head>

Examples

Fallback

package showcase

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

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

Sizes

package showcase

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

templ AvatarSizes() {
	<div class="flex flex-wrap items-center gap-4">
		@avatar.Avatar(avatar.Props{
			Class: "size-6",
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "Small avatar",
			})
			@avatar.Fallback() {
				SM 
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "Default avatar",
			})
			@avatar.Fallback() {
				MD 
			}
		}
		@avatar.Avatar(avatar.Props{
			Class: "size-12",
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "Large avatar",
			})
			@avatar.Fallback() {
				LG 
			}
		}
		@avatar.Avatar(avatar.Props{
			Class: "size-16",
		}) {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "Extra large avatar",
			})
			@avatar.Fallback() {
				XL 
			}
		}
	</div>
}

With Icon

package showcase

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

templ AvatarWithIcon() {
	@avatar.Avatar() {
		@avatar.Fallback() {
			@icon.Camera(icon.Props{Class: "size-[22px] text-muted-foreground"})
		}
	}
}

Group

package showcase

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

templ AvatarGroup() {
	<div class="flex -space-x-3 *:ring-2 *:ring-background">
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "User avatar",
			})
			@avatar.Fallback() {
				AA 
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "User avatar",
			})
			@avatar.Fallback() {
				BB 
			}
		}
		@avatar.Avatar() {
			@avatar.Image(avatar.ImageProps{
				Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
				Alt: "User avatar",
			})
			@avatar.Fallback() {
				CC 
			}
		}
		@avatar.Avatar(avatar.Props{
			Class: "text-muted-foreground",
		}) {
			@avatar.Fallback() {
				+2 
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Avatar

Root container for avatar component. Default size is 8 (size-8). Use the Class prop to customize size and styling.

Name	Type	Default
`ID` Unique identifier for the avatar element.	`string`	-
`Class` Additional CSS classes to apply to the avatar. Use this to set custom sizes (e.g. 'size-12', 'size-16') or other styles.	`string`	-
`Attributes` Additional HTML attributes to apply to the avatar element.	`templ.Attributes`	-

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`	-

Menu

Getting Started

Components

Avatar

Installation

Examples

API Reference

Avatar

Image

Fallback