Avatar

An image element with a fallback for representing the user.

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

package examples import "github.com/axadrn/shadcn-templ/v2/components/avatar" templ AvatarDemo() {	<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src:   "https://github.com/axadrn.png",				Alt:   "@axadrn",				Class: "grayscale",			})			@avatar.Fallback() {				AA			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/joerdav.png",				Alt: "@joerdav",			})			@avatar.Fallback() {				JD			}			@avatar.Badge(avatar.BadgeProps{Class: "bg-green-600 dark:bg-green-800"})		}		@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {			@avatar.Avatar() {				@avatar.Image(avatar.ImageProps{					Src: "https://github.com/axadrn.png",					Alt: "@axadrn",				})				@avatar.Fallback() {					AA				}			}			@avatar.Avatar() {				@avatar.Image(avatar.ImageProps{					Src: "https://github.com/a-h.png",					Alt: "@a-h",				})				@avatar.Fallback() {					AH				}			}			@avatar.Avatar() {				@avatar.Image(avatar.ImageProps{					Src: "https://github.com/joerdav.png",					Alt: "@joerdav",				})				@avatar.Fallback() {					JD				}			}			@avatar.GroupCount() {				+3			}		}	</div>}

Installation

shadcn-templ add avatar

Copy and paste the following code into your project.

components/avatar/avatar.templ

package avatar import "github.com/axadrn/shadcn-templ/v2/utils" type Size string const (	SizeDefault Size = "default"	SizeSm      Size = "sm"	SizeLg      Size = "lg") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Size       Size} type ImageProps struct {	ID         string	Class      string	Attributes templ.Attributes	Alt        string	Src        string} type FallbackProps struct {	ID         string	Class      string	Attributes templ.Attributes} type BadgeProps struct {	ID         string	Class      string	Attributes templ.Attributes} type GroupProps struct {	ID         string	Class      string	Attributes templ.Attributes} type GroupCountProps struct {	ID         string	Class      string	Attributes templ.Attributes} templ Avatar(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Size == "" {		{{ p.Size = SizeDefault }}	}	<div		data-slot="avatar"		data-size={ string(p.Size) }		if p.ID != "" {			id={ p.ID }		}		class={ utils.CN("cn-avatar group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} // Image keeps the absolute/opacity classes as shadcn-templ infra: the image sits// above the fallback and fades in once avatar.js flags it loaded.templ Image(props ...ImageProps) {	{{ var p ImageProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<img		data-tui-avatar-image		data-slot="avatar-image"		if p.ID != "" {			id={ p.ID }		}		if p.Src != "" {			src={ p.Src }		}		alt={ p.Alt }		class={ utils.CN("cn-avatar-image aspect-square size-full object-cover", "absolute inset-0 transition-opacity duration-300 [@media(scripting:enabled)]:not-data-[loaded=true]:opacity-0", p.Class) }		{ p.Attributes... }	/>} templ Fallback(props ...FallbackProps) {	{{ var p FallbackProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<span		data-slot="avatar-fallback"		if p.ID != "" {			id={ p.ID }		}		class={ utils.CN("cn-avatar-fallback flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", p.Class) }		{ p.Attributes... }	>		{ children... }	</span>} templ Badge(props ...BadgeProps) {	{{ var p BadgeProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<span		data-slot="avatar-badge"		if p.ID != "" {			id={ p.ID }		}		class={ utils.CN("cn-avatar-badge absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", p.Class) }		{ p.Attributes... }	>		{ children... }	</span>} templ Group(props ...GroupProps) {	{{ var p GroupProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		data-slot="avatar-group"		if p.ID != "" {			id={ p.ID }		}		class={ utils.CN("cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ GroupCount(props ...GroupCountProps) {	{{ var p GroupCountProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		data-slot="avatar-group-count"		if p.ID != "" {			id={ p.ID }		}		class={ utils.CN("cn-avatar-group-count relative flex shrink-0 items-center justify-center ring-2 ring-background", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>}

components/avatar/avatar.js

(function () {  "use strict";   // Fade an avatar image in once it has loaded. Until then — or if it never  // loads — it stays transparent (opacity-0) and the fallback stacked  // underneath shows through. CSP-safe replacement for inline handlers.  function reveal(img) {    img.dataset.loaded = "true";  }   // Images that load after this script runs.  document.addEventListener(    "load",    function (e) {      const img = e.target;      if (img.matches && img.matches("[data-tui-avatar-image]")) reveal(img);    },    true,  );   // Images that already loaded before this script ran.  document.querySelectorAll("[data-tui-avatar-image]").forEach(function (img) {    if (img.complete && img.naturalWidth > 0) reveal(img);  });})();

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

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

@avatar.Avatar() {	@avatar.Image(avatar.ImageProps{Src: "https://github.com/axadrn.png"})	@avatar.Fallback() {		AA	}}

Composition

Use the following composition to build an Avatar:

avatar.Avatar├── avatar.Image├── avatar.Fallback└── avatar.Badge

Use the following composition to build an avatar.Group:

avatar.Group├── avatar.Avatar│   ├── avatar.Image│   ├── avatar.Fallback│   └── avatar.Badge├── avatar.Avatar│   ├── avatar.Image│   ├── avatar.Fallback│   └── avatar.Badge└── avatar.GroupCount

Basic

A basic avatar component with an image and a fallback.

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

package examples import "github.com/axadrn/shadcn-templ/v2/components/avatar" templ AvatarBasic() {	@avatar.Avatar() {		@avatar.Image(avatar.ImageProps{			Src:   "https://github.com/axadrn.png",			Alt:   "@axadrn",			Class: "grayscale",		})		@avatar.Fallback() {			AA		}	}}

Badge

Use the avatar.Badge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

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

package examples import "github.com/axadrn/shadcn-templ/v2/components/avatar" templ AvatarBadgeExample() {	@avatar.Avatar() {		@avatar.Image(avatar.ImageProps{			Src: "https://github.com/axadrn.png",			Alt: "@axadrn",		})		@avatar.Fallback() {			AA		}		@avatar.Badge(avatar.BadgeProps{Class: "bg-green-600 dark:bg-green-800"})	}}

Use the Class prop to add custom styles to the badge such as custom colors, sizes, etc.

@avatar.Avatar() {	@avatar.Image(avatar.ImageProps{Src: "https://github.com/axadrn.png", Alt: "@axadrn"})	@avatar.Fallback() {		AA	}	@avatar.Badge(avatar.BadgeProps{Class: "bg-green-600 dark:bg-green-800"})}

Badge with Icon

You can also use an icon inside avatar.Badge.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/avatar"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AvatarBadgeIcon() {	@avatar.Avatar(avatar.Props{Class: "grayscale"}) {		@avatar.Image(avatar.ImageProps{			Src: "https://github.com/axadrn.png",			Alt: "@axadrn",		})		@avatar.Fallback() {			AA		}		@avatar.Badge() {			@icon.Plus()		}	}}

Avatar Group

Use the avatar.Group component to add a group of avatars.

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

package examples import "github.com/axadrn/shadcn-templ/v2/components/avatar" templ AvatarGroup() {	@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/axadrn.png",				Alt: "@axadrn",			})			@avatar.Fallback() {				AA			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/a-h.png",				Alt: "@a-h",			})			@avatar.Fallback() {				AH			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/joerdav.png",				Alt: "@joerdav",			})			@avatar.Fallback() {				JD			}		}	}}

Avatar Group Count

Use avatar.GroupCount to add a count to the group.

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

package examples import "github.com/axadrn/shadcn-templ/v2/components/avatar" templ AvatarGroupCount() {	@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/axadrn.png",				Alt: "@axadrn",			})			@avatar.Fallback() {				AA			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/a-h.png",				Alt: "@a-h",			})			@avatar.Fallback() {				AH			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/joerdav.png",				Alt: "@joerdav",			})			@avatar.Fallback() {				JD			}		}		@avatar.GroupCount() {			+3		}	}}

Avatar Group with Icon

You can also use an icon inside avatar.GroupCount.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/avatar"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AvatarGroupCountIcon() {	@avatar.Group(avatar.GroupProps{Class: "grayscale"}) {		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/axadrn.png",				Alt: "@axadrn",			})			@avatar.Fallback() {				AA			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/a-h.png",				Alt: "@a-h",			})			@avatar.Fallback() {				AH			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/joerdav.png",				Alt: "@joerdav",			})			@avatar.Fallback() {				JD			}		}		@avatar.GroupCount() {			@icon.Plus()		}	}}

Sizes

Use the Size prop to change the size of the avatar.

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

package examples import "github.com/axadrn/shadcn-templ/v2/components/avatar" templ AvatarSize() {	<div class="flex flex-wrap items-center gap-2 grayscale">		@avatar.Avatar(avatar.Props{Size: avatar.SizeSm}) {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/axadrn.png",				Alt: "@axadrn",			})			@avatar.Fallback() {				AA			}		}		@avatar.Avatar() {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/axadrn.png",				Alt: "@axadrn",			})			@avatar.Fallback() {				AA			}		}		@avatar.Avatar(avatar.Props{Size: avatar.SizeLg}) {			@avatar.Image(avatar.ImageProps{				Src: "https://github.com/axadrn.png",				Alt: "@axadrn",			})			@avatar.Fallback() {				AA			}		}	</div>}

You can use the Avatar component as a trigger for a dropdown menu.

package examples import (

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") templ AvatarDropdown() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantGhost,			Size:       button.SizeIcon,			Class:      "rounded-full",			Attributes: dropdownmenu.Trigger(ctx),		}) {			@avatar.Avatar() {				@avatar.Image(avatar.ImageProps{					Src: "https://github.com/axadrn.png",					Alt: "axadrn",				})				@avatar.Fallback() {					AA				}			}		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-32"}) {			@dropdownmenu.Group() {				@dropdownmenu.Item() {					Profile				}				@dropdownmenu.Item() {					Billing				}				@dropdownmenu.Item() {					Settings				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {					Log out				}			}		}	}}

API Reference

Avatar

The Avatar component is the root component that wraps the avatar image and fallback.

Prop	Type	Default
`Size`	`SizeDefault \| SizeSm \| SizeLg`	`SizeDefault`
`Class`	`string`	-

Image

The avatar.Image component displays the avatar image.

Prop	Type	Default
`Src`	`string`	-
`Alt`	`string`	-
`Class`	`string`	-

Fallback

The avatar.Fallback component displays a fallback when the image fails to load.

Prop	Type	Default
`Class`	`string`	-

Badge

The avatar.Badge component displays a badge indicator on the avatar, typically positioned at the bottom right.

Prop	Type	Default
`Class`	`string`	-

Group

The avatar.Group component displays a group of avatars with overlapping styling.

Prop	Type	Default
`Class`	`string`	-

GroupCount

The avatar.GroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.

Prop	Type	Default
`Class`	`string`	-

Aspect Ratio Badge

On This Page

Installation Usage Composition Basic Badge Badge with Icon Avatar Group Avatar Group Count Avatar Group with Icon Sizes Dropdown API Reference Avatar Image Fallback Badge Group GroupCount

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.