There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

Powerful suite of Blade components for TALL Stack apps.

Avatar

Avatar component.

TS
<x-avatar text="TS" />
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
<x-avatar text="TS" />
<x-avatar text="TS" color="secondary" />
<x-avatar text="TS" color="slate" />
<x-avatar text="TS" color="gray" />
<x-avatar text="TS" color="zinc" />
<x-avatar text="TS" color="neutral" />
<x-avatar text="TS" color="stone" />
<x-avatar text="TS" color="red" />
<x-avatar text="TS" color="orange" />
<x-avatar text="TS" color="amber" />
<x-avatar text="TS" color="yellow" />
<x-avatar text="TS" color="lime" />
<x-avatar text="TS" color="green" />
<x-avatar text="TS" color="emerald" />
<x-avatar text="TS" color="teal" />
<x-avatar text="TS" color="cyan" />
<x-avatar text="TS" color="sky" />
<x-avatar text="TS" color="blue" />
<x-avatar text="TS" color="indigo" />
<x-avatar text="TS" color="violet" />
<x-avatar text="TS" color="purple" />
<x-avatar text="TS" color="fuchsia" />
<x-avatar text="TS" color="pink" />
<x-avatar text="TS" color="rose" />
<x-avatar text="TS" color="black" />
XS
SM
MD
LG
<x-avatar text="XS" xs />
<x-avatar text="SM" sm />
<x-avatar text="MD" md />
<x-avatar text="LG" lg />
TS
<x-avatar text="TS" square />

An option generate avatar with a svg placeholder.

<x-avatar />
<x-avatar color="secondary" />
<x-avatar color="slate" />
<x-avatar color="gray" />
<x-avatar color="zinc" />
<x-avatar color="neutral" />
<x-avatar color="stone" />
<x-avatar color="red" />
<x-avatar color="orange" />
<x-avatar color="amber" />
<x-avatar color="yellow" />
<x-avatar color="lime" />
<x-avatar color="green" />
<x-avatar color="emerald" />
<x-avatar color="teal" />
<x-avatar color="cyan" />
<x-avatar color="sky" />
<x-avatar color="blue" />
<x-avatar color="indigo" />
<x-avatar color="violet" />
<x-avatar color="purple" />
<x-avatar color="fuchsia" />
<x-avatar color="pink" />
<x-avatar color="rose" />
<x-avatar color="black" />

An option to remove the default border.

<x-avatar color="primary" borderless />
Modelable

An option to generate a UI Avatar from a model based on name property.

Taylor Otwell
<x-avatar :model="auth()->user()" color="fff" />

Generate a UI Avatar from a model based on a property different from name.

taylor@laravel.com
<x-avatar :model="auth()->user()" property="email" color="fff" />

Generate a UI Avatar from a model based customizing the colors.

taylor@laravel.com
<!-- "background" and "color" must be hexadecimals -->
 
<x-avatar :model="auth()->user()"
property="email"
background="ff0000"
color="fff" />

Interact with all other UI Avatar configuration options.

taylor@laravel.com
<x-avatar :model="auth()->user()"
property="email"
background="ff0000"
color="fff"
:options="['uppercase' => false, 'rounded' => true]"
/>
Image

An option to use an image as avatar.

<x-avatar image="https://i.pravatar.cc/300" xs />
<x-avatar image="https://i.pravatar.cc/300" sm />
<x-avatar image="https://i.pravatar.cc/300" md />
<x-avatar image="https://i.pravatar.cc/300" lg />

You can also set the image via x-bind:src from AlpineJS:

<div x-data="{ image: 'https://i.pravatar.cc/300' }">
<x-avatar image x-bind:src="image" />
</div>
Taylor Otwell, Creator of Laravel
<x-avatar image="https://i.pravatar.cc/300" text="alt-text-goes-here" />

Code highlighting provided by Torchlight