AA
JD AA
AH JD+3
package showcase
import "github.com/templui/templui/components/avatar"
templ AvatarDefault() {
<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
templui add avatar
Load the script once in your layout:
<head>
@avatar.Script()
</head>
import "github.com/templui/templui/components/avatar"
Load the script once in your layout:
<head>
@avatar.Script()
</head>
Examples
Basic
AApackage showcase
import "github.com/templui/templui/components/avatar"
templ AvatarBasic() {
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://github.com/axadrn.png",
Alt: "@axadrn",
Class: "grayscale",
})
@avatar.Fallback() {
AA
}
}
}
Badge
AA package showcase
import "github.com/templui/templui/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"})
}
}
Badge with Icon
AA package showcase
import (
"github.com/templui/templui/components/avatar"
"github.com/templui/templui/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
AA AH JDpackage showcase
import "github.com/templui/templui/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
AA AH JD+3
package showcase
import "github.com/templui/templui/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
AA AH JDpackage showcase
import (
"github.com/templui/templui/components/avatar"
"github.com/templui/templui/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
AA AA AApackage showcase
import "github.com/templui/templui/components/avatar"
templ AvatarSizes() {
<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>
}
Dropdown
package showcase
import (
"github.com/templui/templui/components/avatar"
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/dropdownmenu"
)
templ AvatarDropdown() {
@dropdownmenu.Root() {
@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{Class: "text-destructive"}) {
Log out
}
}
}
}
}
API Reference
Required parameter
Hover for description
Avatar
Root container. Compose with Image, Fallback and Badge; stack avatars in a Group.
| Name | Type | Default |
|---|---|---|
Avatar size. Options: 'default' (size-8), 'sm' (size-6), 'lg' (size-10). | | |
Optional HTML id for the element. | | - |
Additional CSS classes. Override the size with size-* if needed. | | - |
Additional HTML attributes to apply. | | - |
Image
The user's photo.
| Name | Type | Default |
|---|---|---|
Image source URL. | | - |
Alternative text for the image. | | - |
Optional HTML id for the element. | | - |
Additional CSS classes to apply. | | - |
Additional HTML attributes to apply. | | - |
Fallback
Shown when the image fails to load — typically initials.
| Name | Type | Default |
|---|---|---|
Optional HTML id for the element. | | - |
Additional CSS classes to apply. | | - |
Additional HTML attributes to apply. | | - |
Badge
A small status dot or icon on the avatar. Stack avatars with Group and GroupCount.
| Name | Type | Default |
|---|---|---|
Optional HTML id for the element. | | - |
Additional CSS classes (e.g. a status color). | | - |
Additional HTML attributes to apply. | | - |