View as Markdown

Avatar

An image element with a fallback for representing the user.

Loading... 
<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
    <twig:Avatar>
        <twig:Avatar:Image
            src="https://github.com/shadcn.png"
            alt="@shadcn"
            class="grayscale"
        />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
        <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
    </twig:Avatar>
    <twig:Avatar:Group class="grayscale">
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
            <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
            <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar:GroupCount>+3</twig:Avatar:GroupCount>
    </twig:Avatar:Group>
</div>

Installation

bin/console ux:install avatar --kit shadcn

That's it!

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Avatar.html.twig 
{# @prop size 'default'|'sm'|'lg' The avatar size. Defaults to `default` #}
{# @block content The avatar content, typically an image or `Avatar:Fallback` #}
{%- props size = 'default' -%}

<span
    data-slot="avatar"
    data-size="{{ size }}"
    class="{{ ('size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>
templates/components/Avatar/Badge.html.twig 
{# @block content The badge content, typically an icon indicating status #}
<span
    data-slot="avatar-badge"
    class="{{ ('absolute ltr:right-0 rtl:end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background 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 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>
templates/components/Avatar/Fallback.html.twig 
{# @block content The fallback content displayed when no image is available, typically initials #}
<span
    data-slot="avatar-fallback"
    class="{{ ('bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>
templates/components/Avatar/Group.html.twig 
{# @block content The grouped avatars, typically multiple `Avatar` components #}
<div
    data-slot="avatar-group"
    class="{{ ('*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Avatar/GroupCount.html.twig 
{# @block content The count indicator showing number of additional avatars (e.g., "+3") #}
<div
    data-slot="avatar-group-count"
    class="{{ ('bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
templates/components/Avatar/Image.html.twig 
<img
    data-slot="avatar-image"
    class="{{ ('hidden rounded-full aspect-square size-full object-cover ' ~ attributes.render('class'))|tailwind_merge }}"
    onload="this.classList.remove('hidden'); this.closest('[data-slot=avatar]')?.querySelector('[data-slot=avatar-fallback]')?.classList.add('hidden');"
    {{ attributes.defaults({alt: ''}) }}
/>

Happy coding!

Usage

<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/shadcn.png" />
    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
</twig:Avatar>

Examples

Basic

A basic avatar component with an image and a fallback.

Loading... 
<twig:Avatar>
    <twig:Avatar:Image
        src="https://github.com/shadcn.png"
        alt="@shadcn"
        class="grayscale"
    />
    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
</twig:Avatar>

Badge

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

Loading... 
<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
</twig:Avatar>

Badge with Icon

You can also use an icon inside Avatar:Badge.

Loading... 
<twig:Avatar class="grayscale">
    <twig:Avatar:Image src="https://github.com/pranathip.png" alt="@pranathip" />
    <twig:Avatar:Fallback>PP</twig:Avatar:Fallback>
    <twig:Avatar:Badge>
        <twig:ux:icon name="lucide:plus" />
    </twig:Avatar:Badge>
</twig:Avatar>

Avatar Group

Use the Avatar:Group component to add a group of avatars.

Loading... 
<twig:Avatar:Group class="grayscale">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
    </twig:Avatar>
</twig:Avatar:Group>

Avatar Group Count

Use Avatar:GroupCount to add a count to the group.

Loading... 
<twig:Avatar:Group class="grayscale">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar:GroupCount>+3</twig:Avatar:GroupCount>
</twig:Avatar:Group>

Avatar Group with Icon

You can also use an icon inside Avatar:GroupCount.

Loading... 
<twig:Avatar:Group class="grayscale">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar:GroupCount>
        <twig:ux:icon name="lucide:plus" />
    </twig:Avatar:GroupCount>
</twig:Avatar:Group>

Sizes

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

Loading... 
<div class="flex flex-wrap items-center gap-2 grayscale">
    <twig:Avatar size="sm">
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar size="lg">
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

Loading... 
<div class="flex flex-col gap-8">
    <div class="flex flex-row flex-wrap items-center gap-6 md:gap-12" dir="rtl">
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
            <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
        </twig:Avatar>
        <twig:Avatar:Group class="grayscale">
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar:GroupCount>+٣</twig:Avatar:GroupCount>
        </twig:Avatar:Group>
    </div>
    <div class="flex flex-row flex-wrap items-center gap-6 md:gap-12" dir="rtl">
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
            <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
        </twig:Avatar>
        <twig:Avatar:Group class="grayscale">
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar:GroupCount>+3</twig:Avatar:GroupCount>
        </twig:Avatar:Group>
    </div>
</div>

API Reference

Component Avatar

Prop Type Description
size 'default'|'sm'|'lg' The avatar size. Defaults to default
Block Description
content The avatar content, typically an image or Avatar:Fallback

Component Avatar:Badge

Block Description
content The badge content, typically an icon indicating status

Component Avatar:Fallback

Block Description
content The fallback content displayed when no image is available, typically initials

Component Avatar:Group

Block Description
content The grouped avatars, typically multiple Avatar components

Component Avatar:GroupCount

Block Description
content The count indicator showing number of additional avatars (e.g., "+3")