Avatar

Visual representation of a user through images or initials.

Source Tailwind Javascript

User avatar

Installation

  1. Install the component

    templui add avatar
  2. Add the JavaScript to your layout

    @avatar.Script()
    

    Call this template in your base layout file (e.g., in the <head> section).

Examples

Fallback

User avatar JD

Sizes

User avatar
User avatar
User avatar

With Icon

Group

User avatar
User avatar
User avatar
+2

API Reference

Required parameter
Hover for description

Avatar

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

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-
Size
Size
medium
InGroup
bool
false

Image

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

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-
Src
string
-
Alt
string
-

Fallback

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

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-

Group

Container for displaying multiple avatars in a group layout.

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-
Spacing
Spacing
SpacingMd