UI.BlueStack.io - Component Library

Avatar Sizes

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar tiny">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar small">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar large">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar big">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
            </div>

Avatar with Initials

JD

AB

MK

PS

WB

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar tiny">JD</div>
                <div class="avatar small">AB</div>
                <div class="avatar">MK</div>
                <div class="avatar large">PS</div>
                <div class="avatar big">WB</div>
            </div>

Avatar Colors

DG

GR

RD

OR

YL

GN

TL

BL

VT

PR

PK

BR

OL

BK

<div class="flex gap-3 flex-wrap items-center">
                <div class="avatar">DG</div>
                <div class="avatar grey">GR</div>
                <div class="avatar red">RD</div>
                <div class="avatar orange">OR</div>
                <div class="avatar yellow">YL</div>
                <div class="avatar green">GN</div>
                <div class="avatar teal">TL</div>
                <div class="avatar blue">BL</div>
                <div class="avatar violet">VT</div>
                <div class="avatar purple">PR</div>
                <div class="avatar pink">PK</div>
                <div class="avatar brown">BR</div>
                <div class="avatar olive">OL</div>
                <div class="avatar black">BK</div>
            </div>

Default Avatar Icons

<div class="flex gap-3 flex-wrap items-center">
                <div class="avatar">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
                        <circle cx="50" cy="50" r="50" class="avatar-bg"/>
                        <g class="avatar-person" fill="currentColor" opacity="0.6">
                            <circle cx="50" cy="35" r="12"/>
                            <path d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"/>
                        </g>
                    </svg>
                </div>
                <div class="avatar grey">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
                        <circle cx="50" cy="50" r="50" class="avatar-bg"/>
                        <g class="avatar-person" fill="currentColor" opacity="0.6">
                            <circle cx="50" cy="35" r="12"/>
                            <path d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"/>
                        </g>
                    </svg>
                </div>
                <div class="avatar red">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
                        <circle cx="50" cy="50" r="50" class="avatar-bg"/>
                        <g class="avatar-person" fill="currentColor" opacity="0.6">
                            <circle cx="50" cy="35" r="12"/>
                            <path d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"/>
                        </g>
                    </svg>
                </div>
                <div class="avatar blue">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
                        <circle cx="50" cy="50" r="50" class="avatar-bg"/>
                        <g class="avatar-person" fill="currentColor" opacity="0.6">
                            <circle cx="50" cy="35" r="12"/>
                            <path d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"/>
                        </g>
                    </svg>
                </div>
                <div class="avatar green">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
                        <circle cx="50" cy="50" r="50" class="avatar-bg"/>
                        <g class="avatar-person" fill="currentColor" opacity="0.6">
                            <circle cx="50" cy="35" r="12"/>
                            <path d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"/>
                        </g>
                    </svg>
                </div>
                <div class="avatar purple">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
                        <circle cx="50" cy="50" r="50" class="avatar-bg"/>
                        <g class="avatar-person" fill="currentColor" opacity="0.6">
                            <circle cx="50" cy="35" r="12"/>
                            <path d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"/>
                        </g>
                    </svg>
                </div>
            </div>

Avatar Shapes

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar rounded">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar square">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
            </div>

Avatar with Status - All Shapes

Default Shape (Round)

Rounded Shape

Square Shape

Status with Initials (All Shapes)

JD

AB

MK

PS

WB

TG

<div class="space-y-6">
                <!-- Default Shape (Round) -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Default Shape (Round)</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar tiny status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar small status negative">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar status green">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status warning">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar big status teal">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

                <!-- Rounded Shape -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Rounded Shape</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar rounded tiny status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded small status negative">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded status green">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status warning">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded big status teal">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

                <!-- Square Shape -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Square Shape</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar square tiny status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square small status negative">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square status green">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status warning">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square big status teal">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

                <!-- With Initials -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Status with Initials (All Shapes)</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <!-- Round -->
                        <div class="avatar status positive">JD</div>
                        <div class="avatar status negative">AB</div>
                        <!-- Rounded -->
                        <div class="avatar rounded status warning">MK</div>
                        <div class="avatar rounded status info">PS</div>
                        <!-- Square -->
                        <div class="avatar square status green">WB</div>
                        <div class="avatar square status purple">TG</div>
                    </div>
                </div>
            </div>

<div class="space-y-6">
                
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Default Shape (Round)</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar tiny status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar small status negative">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar status green">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status warning">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar big status teal">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Rounded Shape</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar rounded tiny status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded small status negative">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded status green">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status warning">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded big status teal">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Square Shape</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar square tiny status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square small status negative">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square status green">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status warning">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square big status teal">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Status with Initials (All Shapes)</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        
                        <div class="avatar status positive">JD</div>
                        <div class="avatar status negative">AB</div>
                        
                        <div class="avatar rounded status warning">MK</div>
                        <div class="avatar rounded status info">PS</div>
                        
                        <div class="avatar square status green">WB</div>
                        <div class="avatar square status purple">TG</div>
                    </div>
                </div>
            </div>

Status Positions - All Shapes

Default Shape (Round) - All Positions

Rounded Shape - All Positions

Square Shape - All Positions

Different Sizes & Positions

SM

MD

<div class="space-y-6">
                <!-- Default Shape (Round) -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Default Shape (Round) - All Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar large status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status negative top right">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status warning bottom left">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status info top left">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

                <!-- Rounded Shape -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Rounded Shape - All Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar rounded large status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status negative top right">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status warning bottom left">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status info top left">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

                <!-- Square Shape -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Square Shape - All Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar square large status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status negative top right">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status warning bottom left">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status info top left">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

                <!-- Combined Example with Different Sizes -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Different Sizes & Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <!-- Round avatars -->
                        <div class="avatar tiny status green top">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar small status yellow right">SM</div>
                        <!-- Rounded avatars -->
                        <div class="avatar rounded status purple bottom">MD</div>
                        <div class="avatar rounded large status pink left">
                            <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <!-- Square avatars -->
                        <div class="avatar square big status teal bottom right">
                            <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>
            </div>

<div class="space-y-6">
                
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Default Shape (Round) - All Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar large status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status negative top right">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status warning bottom left">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar large status info top left">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Rounded Shape - All Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar rounded large status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status negative top right">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status warning bottom left">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar rounded large status info top left">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Square Shape - All Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        <div class="avatar square large status positive">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status negative top right">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status warning bottom left">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar square large status info top left">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-medium text-gray-700 mb-3">Different Sizes & Positions</h4>
                    <div class="flex gap-4 flex-wrap items-center">
                        
                        <div class="avatar tiny status green top">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        <div class="avatar small status yellow right">SM</div>
                        
                        <div class="avatar rounded status purple bottom">MD</div>
                        <div class="avatar rounded large status pink left">
                            <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                        
                        <div class="avatar square big status teal bottom right">
                            <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                        </div>
                    </div>
                </div>
            </div>

Avatar with Badge

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar badge" data-badge="5">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar badge" data-badge="99+">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar large badge" data-badge="NEW">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
            </div>

Verified Avatars

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar verified">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar large verified blue">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar large verified gold">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
            </div>

VIP Avatars

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar vip">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar large vip gold">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar large vip purple">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar large vip primary">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
            </div>

VIP Avatar Sizes

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar tiny vip">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar small vip">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar vip">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar large vip">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
                <div class="avatar big vip">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="VIP User avatar">
                </div>
            </div>

Avatar Collections

Basic Collection (.avatars)

+12

With Stacked Modifier (.avatars.stacked) - Hover to animate

With Tight Modifier (.avatars.tight) - Tighter spacing

+5

Combined Modifiers (.avatars.stacked.tight) - Hover for enhanced animation

+8

Size + Modifiers (.avatars.small.stacked.tight)

JD

AB

MK

PS

+3

<div class="space-y-8">
                <!-- Basic Avatar Collection -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Basic Collection (.avatars)</p>
                    <div class="avatars">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                        <div class="count">+12</div>
                    </div>
                </div>

                <!-- Stacked Modifier - Hover animations -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">With Stacked Modifier (.avatars.stacked) - Hover to animate</p>
                    <div class="avatars stacked">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                    </div>
                </div>

                <!-- Tight Modifier - Tighter overlap -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">With Tight Modifier (.avatars.tight) - Tighter spacing</p>
                    <div class="avatars tight">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                        <div class="count">+5</div>
                    </div>
                </div>

                <!-- Combined Modifiers - Stacked + Tight -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Combined Modifiers (.avatars.stacked.tight) - Hover for enhanced animation</p>
                    <div class="avatars stacked tight">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                        <div class="count">+8</div>
                    </div>
                </div>

                <!-- Size with Modifiers -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Size + Modifiers (.avatars.small.stacked.tight)</p>
                    <div class="avatars small stacked tight">
                        <div class="avatar">JD</div>
                        <div class="avatar">AB</div>
                        <div class="avatar">MK</div>
                        <div class="avatar">PS</div>
                        <div class="count">+3</div>
                    </div>
                </div>
            </div>

<div class="space-y-8">
                
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Basic Collection (.avatars)</p>
                    <div class="avatars">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                        <div class="count">+12</div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">With Stacked Modifier (.avatars.stacked) - Hover to animate</p>
                    <div class="avatars stacked">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">With Tight Modifier (.avatars.tight) - Tighter spacing</p>
                    <div class="avatars tight">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                        <div class="count">+5</div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Combined Modifiers (.avatars.stacked.tight) - Hover for enhanced animation</p>
                    <div class="avatars stacked tight">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                        </div>
                        <div class="count">+8</div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Size + Modifiers (.avatars.small.stacked.tight)</p>
                    <div class="avatars small stacked tight">
                        <div class="avatar">JD</div>
                        <div class="avatar">AB</div>
                        <div class="avatar">MK</div>
                        <div class="avatar">PS</div>
                        <div class="count">+3</div>
                    </div>
                </div>
            </div>

Compact Avatar Collections

Basic Compact Collection (.avatars.compact)

+4

Stacked Compact (.avatars.compact.stacked) - Hover for animation & container elevation

+7

Tight Compact (.avatars.compact.tight) - Tighter spacing

+2

Combined Modifiers (.avatars.compact.small.stacked.tight.primary)

+15

<div class="space-y-8">
                <!-- Basic Compact Collection -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Basic Compact Collection (.avatars.compact)</p>
                    <div class="avatars compact">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+4</div>
                    </div>
                </div>

                <!-- Stacked Compact Collection -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Stacked Compact (.avatars.compact.stacked) - Hover for animation & container elevation</p>
                    <div class="avatars compact stacked">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+7</div>
                    </div>
                </div>

                <!-- Tight Compact Collection -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Tight Compact (.avatars.compact.tight) - Tighter spacing</p>
                    <div class="avatars compact tight">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+2</div>
                    </div>
                </div>

                <!-- Combined Modifiers -->
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Combined Modifiers (.avatars.compact.small.stacked.tight.primary)</p>
                    <div class="avatars compact small stacked tight primary">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+15</div>
                    </div>
                </div>
            </div>

<div class="space-y-8">
                
                <div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Basic Compact Collection (.avatars.compact)</p>
                    <div class="avatars compact">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+4</div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Stacked Compact (.avatars.compact.stacked) - Hover for animation & container elevation</p>
                    <div class="avatars compact stacked">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+7</div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Tight Compact (.avatars.compact.tight) - Tighter spacing</p>
                    <div class="avatars compact tight">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+2</div>
                    </div>
                </div>

<div class="mb-6">
                    <p class="text-sm text-gray-600 mb-3">Combined Modifiers (.avatars.compact.small.stacked.tight.primary)</p>
                    <div class="avatars compact small stacked tight primary">
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                        </div>
                        <div class="avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                        </div>
                        <div class="count">+15</div>
                    </div>
                </div>
            </div>

Compact Avatar Collections - All Sizes

All Sizes (on gray background)

Tiny

+2

Small

+5

Default

+4

Large

+12

Big

+99

<div class="mb-6">
                <p class="text-sm text-gray-600 mb-3">All Sizes (on gray background)</p>
                <div class="p-8 bg-gray-100 rounded-lg space-y-4">
                    <!-- Tiny -->
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Tiny</span>
                        <div class="avatars compact tiny">
                            <div class="avatar">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                            </div>
                            <div class="avatar">
                                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                            </div>
                            <div class="avatar">
                                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                            <div class="count">+2</div>
                        </div>
                    </div>
                    
                    <!-- Small -->
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Small</span>
                        <div class="avatars compact small">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User 5">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User 6">
                                </div>
                            <div class="count">+5</div>
                        </div>
                    </div>
                    
                    <!-- Default -->
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Default</span>
                        <div class="avatars compact">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User 7">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User 8">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces" alt="User 9">
                                </div>
                            <div class="count">+4</div>
                        </div>
                    </div>
                    
                    <!-- Large -->
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Large</span>
                        <div class="avatars compact large">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=faces" alt="User 10">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=400&h=400&fit=crop&crop=faces" alt="User 11">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces" alt="User 12">
                                </div>
                            <div class="count">+12</div>
                        </div>
                    </div>
                    
                    <!-- Big -->
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Big</span>
                        <div class="avatars compact big">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces" alt="User 13">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=faces" alt="User 14">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=400&h=400&fit=crop&crop=faces" alt="User 15">
                                </div>
                            <div class="count">+99</div>
                        </div>
                    </div>
                </div>
            </div>

<div class="mb-6">
                <p class="text-sm text-gray-600 mb-3">All Sizes (on gray background)</p>
                <div class="p-8 bg-gray-100 rounded-lg space-y-4">
                    
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Tiny</span>
                        <div class="avatars compact tiny">
                            <div class="avatar">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User 1">
                            </div>
                            <div class="avatar">
                                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User 2">
                            </div>
                            <div class="avatar">
                                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User 3">
                            <div class="count">+2</div>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Small</span>
                        <div class="avatars compact small">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User 4">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User 5">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User 6">
                                </div>
                            <div class="count">+5</div>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Default</span>
                        <div class="avatars compact">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User 7">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User 8">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces" alt="User 9">
                                </div>
                            <div class="count">+4</div>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Large</span>
                        <div class="avatars compact large">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=faces" alt="User 10">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=400&h=400&fit=crop&crop=faces" alt="User 11">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces" alt="User 12">
                                </div>
                            <div class="count">+12</div>
                        </div>
                    </div>
                    
                    
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-500 w-12">Big</span>
                        <div class="avatars compact big">
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces" alt="User 13">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=faces" alt="User 14">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=400&h=400&fit=crop&crop=faces" alt="User 15">
                                </div>
                            <div class="count">+99</div>
                        </div>
                    </div>
                </div>
            </div>

Colored Compact Collections (Small Size)

+5

+3

+8

+12

+7

+2

+4

+15

+99

+6

+3

+7

+11

+24

+10

<div class="space-y-4">
                    <!-- Semantic Colors -->
                    <div class="flex gap-3 flex-wrap items-center">
                        <div class="avatars compact small primary">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+5</div>
                        </div>
                        
                        <div class="avatars compact small positive">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+3</div>
                        </div>
                        
                        <div class="avatars compact small negative">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+8</div>
                        </div>
                        
                        <div class="avatars compact small warning">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+12</div>
                        </div>
                        
                        <div class="avatars compact small info">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+7</div>
                        </div>
                    </div>
                    
                    <!-- Extended Colors Row 1 -->
                    <div class="flex gap-3 flex-wrap items-center">
                        <div class="avatars compact small purple">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+2</div>
                        </div>
                        
                        <div class="avatars compact small pink">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+4</div>
                        </div>
                        
                        <div class="avatars compact small teal">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+15</div>
                        </div>
                        
                        <div class="avatars compact small yellow">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+99</div>
                        </div>
                        
                        <div class="avatars compact small olive">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+6</div>
                        </div>
                    </div>
                    
                    <!-- Extended Colors Row 2 -->
                    <div class="flex gap-3 flex-wrap items-center">
                        <div class="avatars compact small violet">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+3</div>
                        </div>
                        
                        <div class="avatars compact small blue">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+7</div>
                        </div>
                        
                        <div class="avatars compact small green">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+11</div>
                        </div>
                        
                        <div class="avatars compact small red">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+24</div>
                        </div>
                        
                        <div class="avatars compact small brown">
                            <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                                <div class="avatar">
                                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces" alt="User">
                                </div>
                            <div class="count">+10</div>
                        </div>
                    </div>
            </div>

Avatar with Actions

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar action">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                    <button class="action">
                        <i class="icon camera w-4 h-4"></i>
                    </button>
                </div>
                <div class="avatar large action">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                    <button class="action">
                        <i class="icon pencil w-4 h-4"></i>
                    </button>
                </div>
                <div class="avatar big action">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                    <button class="action">
                        <i class="icon plus w-8 h-8"></i>
                    </button>
                </div>
            </div>

Avatar with Ring

<div class="flex gap-4 flex-wrap items-center">
                <div class="avatar ring">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar ring primary">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar ring positive">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
                <div class="avatar ring negative">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces" alt="User avatar">
                </div>
            </div>

avatar Component

Avatar System