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 avatarLoad 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
Fallback
JDpackage 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
SM MD LG XL 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
AA BB CC 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
Avatar
Root container for avatar component. Default size is 8 (size-8). Use the Class prop to customize size and styling.
| Name | Type | Default |
|---|---|---|
Unique identifier for the avatar element. | | - |
Additional CSS classes to apply to the avatar. Use this to set custom sizes (e.g. 'size-12', 'size-16') or other styles. | | - |
Additional HTML attributes to apply to the avatar element. | | - |
Image
Image element within the avatar that displays the user's photo.
| Name | Type | Default |
|---|---|---|
Unique identifier for the image element. | | - |
Additional CSS classes to apply to the image. | | - |
Additional HTML attributes to apply to the image element. | | - |
Image source URL. | | - |
Alternative text for the image. | | - |
Fallback
Fallback element displayed when the image fails to load, typically showing initials or an icon.
| Name | Type | Default |
|---|---|---|
Unique identifier for the fallback element. | | - |
Additional CSS classes to apply to the fallback. | | - |
Additional HTML attributes to apply to the fallback element. | | - |
