Avatar

Basic

Basic Avatar

Default avatar component with image

Preview Code Auto

Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded'
    ),
    cls='avatar'
)

Sizes

Avatar Sizes

Different size classes from w-8 to w-32

Preview Code Auto

Div(
    Div(
        Img(src='...'),
        cls='w-32 rounded'
    ),
    cls='avatar'
)
# Repeat with w-20, w-16, w-8

Variants

Rounded Avatars

Preview Code Auto

Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded-xl'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded-full'
    ),
    cls='avatar'
)

Masked Avatars

Preview Code Auto

Div(
    Div(
        Img(src='...'),
        cls='mask mask-squircle w-24'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='mask mask-hexagon w-24'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='mask mask-triangle w-24'
    ),
    cls='avatar'
)

Groups

Avatar Group

Stacked avatars with negative spacing

Preview Code Auto

Div(
    *(Div(
        Div(Img(src='...'), cls='w-12'),
        cls='avatar'
    ) for _ in range(4)),
    cls='avatar-group -space-x-6 rtl:space-x-reverse'
)

Group with Counter

Preview Code Auto

+99

Div(
    Div(
        *(Div(
            Div(
                Img(src='...'),
                cls='w-12'
            ),
            cls='avatar'
        ) for _ in range(3)),
    Div(
        Div(
            Span('+99'),
            cls='bg-neutral text-neutral-content w-12'
        ),
        cls='avatar avatar-placeholder'
    ),
    cls='avatar-group -space-x-6 rtl:space-x-reverse'
)

Indicators

Ring Indicator

Preview Code Auto

Div(
    Div(
        Img(src='...'),
        cls='ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2'
    ),
    cls='avatar'
)

Presence Indicator

Online/offline status badges

Preview Code Auto

Div(
    Div(Img(src='...'), cls='w-24 rounded-full'),
    cls='avatar avatar-online'
)
Div(
    Div(Img(src='...'), cls='w-24 rounded-full'),
    cls='avatar avatar-offline'
)

Placeholders

Letter Placeholders

Avatars using initials when no image available

Preview Code Auto

Div(
    Div(
        Span('D', cls='text-3xl'),
        cls='bg-neutral text-neutral-content w-24 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
Div(
    Div(
        Span('AI', cls='text-xl'),
        cls='bg-neutral text-neutral-content w-16 rounded-full'
    ),
    cls='avatar avatar-online avatar-placeholder'
)
Div(
    Div(
        Span('SY'),
        cls='bg-neutral text-neutral-content w-12 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
Div(
    Div(
        Span('UI', cls='text-xs'),
        cls='bg-neutral text-neutral-content w-8 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)

Class Reference

Class	Type	Description
avatar	Component	Base container for avatar
avatar-group	Component	Container for multiple avatars
avatar-online	Modifier	Active presence indicator
avatar-offline	Modifier	Inactive presence indicator
avatar-placeholder	Modifier	Enables placeholder styling

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo