TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Avatar

Avatar component.

# Basic Usage

TS 
<x-avatar text="TS" />

# Color Variations

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
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="mauve" />
<x-avatar text="TS" color="olive" />
<x-avatar text="TS" color="mist" />
<x-avatar text="TS" color="taupe" />
<x-avatar text="TS" color="black" />

# Size Variations

XS
SM
MD
LG
XL
2XL
3XL
4XL
5XL
6XL
7XL 
<x-avatar text="XS" xs />
<x-avatar text="SM" sm />
<x-avatar text="MD" md />
<x-avatar text="LG" lg />
<x-avatar text="XL" xl />
<x-avatar text="2XL" 2xl />
<x-avatar text="3XL" 3xl />
<x-avatar text="4XL" 4xl />
<x-avatar text="5XL" 5xl />
<x-avatar text="6XL" 6xl />
<x-avatar text="7XL" 7xl />

# Square Variations

TS 
<x-avatar text="TS" square />

# Placeholder

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="mauve" />
<x-avatar color="olive" />
<x-avatar color="mist" />
<x-avatar color="taupe" />
<x-avatar color="black" />

# Borderless

An option to remove the default border. 

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

# Modelable

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

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

# Custom Property

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

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

# Customizing Colors

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

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

# Other Options

Interact with all other UI Avatar configuration options.

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

# Gravatar
NEW

An option to read the avatar from gravatar.com. 

<!-- A value carrying an "@" is the address itself. -->
 
<x-avatar gravatar="[email protected]" />

# From Model
NEW 

<!-- Without a value, the "email" attribute of the model is used. -->
 
<x-avatar :model="auth()->user()" gravatar />

# From Another Column
NEW

An option to use a different property to generate the gravatar 

<!-- A value without an "@" names the model attribute holding the address. -->
 
<x-avatar :model="auth()->user()" gravatar="contact_email" />

# Gravatar Default
NEW

An option to pick which image Gravatar serves when there is no account and no name to fall back to. 

<!-- Allowed: 404, mp, identicon, monsterid, wavatar, retro, robohash, blank -->
 
<x-avatar gravatar="[email protected]" gravatar-default="identicon" />
<x-avatar gravatar="[email protected]" gravatar-default="retro" />
<x-avatar gravatar="[email protected]" gravatar-default="robohash" />
<x-avatar gravatar="[email protected]" gravatar-default="monsterid" />
Image

# 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>

# Default Alt Text

Taylor Otwell, Creator of Laravel 
<x-avatar image="https://i.pravatar.cc/300" text="alt-text-goes-here" />

# Group 

<x-avatar.group>
    <x-avatar image="https://i.pravatar.cc/300" borderless />
    <x-avatar image="https://i.pravatar.cc/200" borderless />
    <x-avatar image="https://i.pravatar.cc/100" borderless />
</x-avatar.group>

# Group Reverse

An option to invert the avatar overlap layering.

A
B
C
D
E 
<!-- The first avatar in markup ends on the right; the overlap progresses right-to-left. -->
<!-- DOM order is preserved, only the painted overlap is mirrored. -->
 
<x-avatar.group reverse>
    <x-avatar text="A" color="indigo" />
    <x-avatar text="B" color="emerald" />
    <x-avatar text="C" color="amber" />
    <x-avatar text="D" color="pink" />
    <x-avatar text="E" color="sky" />
</x-avatar.group>

# Presence

An option to indicate the presence status of the avatar. 

<x-avatar image="https://i.pravatar.cc/300" presence />
 
<!-- with a pulse indicator -->
 
<x-avatar image="https://i.pravatar.cc/300" presence pulse />

# Presence Color 

<x-avatar image="https://i.pravatar.cc/300" presence presence-color="green" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-color="red" />

# Presence Positions 

<x-avatar image="https://i.pravatar.cc/300" presence presence-position="right-top" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-position="right-bottom" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-position="left-top" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-position="left-bottom" />

Code highlighting provided by Torchlight