Components
Avatar
An image element with a fallback for representing the user.
php artisan blatui:add avatar
CN
<x-ui.avatar>
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>Badge
CN
3
LR
ER
{{-- Avatars with a count badge or an icon badge. --}}
<div class="flex items-center gap-6">
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="bg-primary text-primary-foreground absolute -end-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium tabular-nums">3</span>
</div>
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-image src="https://github.com/leerob.png" alt="@leerob" />
<x-ui.avatar-fallback>LR</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="border-background bg-background absolute end-0 bottom-0 flex size-5 items-center justify-center rounded-full border-2" role="img" aria-label="Verified">
<x-lucide-badge-check class="size-3.5 text-green-600 dark:text-green-400" />
</span>
</div>
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<x-ui.avatar-fallback>ER</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="border-background bg-primary text-primary-foreground absolute -end-1 -bottom-1 flex size-5 items-center justify-center rounded-full border-2">
<x-lucide-plus class="size-3" />
</span>
</div>
</div>Fallback
JD
<x-ui.avatar>
<x-ui.avatar-fallback>JD</x-ui.avatar-fallback>
</x-ui.avatar>Group
CN
LR
ER
<div class="flex -space-x-2 *:ring-background *:ring-2">
<x-ui.avatar>
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar>
<x-ui.avatar-image src="https://github.com/leerob.png" alt="@leerob" />
<x-ui.avatar-fallback>LR</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar>
<x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<x-ui.avatar-fallback>ER</x-ui.avatar-fallback>
</x-ui.avatar>
</div>Hover Group
CN
LR
ER
+5
{{-- Stacked group where each avatar lifts on hover. --}}
<div class="flex -space-x-3">
<x-ui.avatar class="ring-background size-10 ring-2 transition-all duration-300 ease-in-out hover:z-10 hover:-translate-y-1 hover:shadow-md">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="ring-background size-10 ring-2 transition-all duration-300 ease-in-out hover:z-10 hover:-translate-y-1 hover:shadow-md">
<x-ui.avatar-image src="https://github.com/leerob.png" alt="@leerob" />
<x-ui.avatar-fallback>LR</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="ring-background size-10 ring-2 transition-all duration-300 ease-in-out hover:z-10 hover:-translate-y-1 hover:shadow-md">
<x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<x-ui.avatar-fallback>ER</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="ring-background bg-muted size-10 ring-2 transition-all duration-300 ease-in-out hover:z-10 hover:-translate-y-1 hover:shadow-md">
<x-ui.avatar-fallback class="text-xs font-medium">+5</x-ui.avatar-fallback>
</x-ui.avatar>
</div>Ring
CN
LR
ER
CN
{{-- Avatars with a ring / coloured border. --}}
<div class="flex items-center gap-5">
<x-ui.avatar class="ring-ring size-10 ring-2 ring-offset-2 ring-offset-background">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="size-10 ring-2 ring-green-600 ring-offset-2 ring-offset-background dark:ring-green-400">
<x-ui.avatar-image src="https://github.com/leerob.png" alt="@leerob" />
<x-ui.avatar-fallback>LR</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="ring-primary size-10 ring-2">
<x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<x-ui.avatar-fallback>ER</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="border-primary size-10 border-2">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
</div>Rounded
CN
ER
<div class="flex items-center gap-4">
<x-ui.avatar class="rounded-lg">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback class="rounded-lg">CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="size-12 rounded-lg">
<x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<x-ui.avatar-fallback class="rounded-lg">ER</x-ui.avatar-fallback>
</x-ui.avatar>
</div>Sizes
CN
CN
CN
CN
<div class="flex items-center gap-4">
<x-ui.avatar class="size-6">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="size-8">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="size-12">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<x-ui.avatar class="size-16">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback class="text-lg">CN</x-ui.avatar-fallback>
</x-ui.avatar>
</div>Status
CN
LR
ER
JD
{{-- Presence indicators pinned to the avatar corner. --}}
<div class="flex items-center gap-5">
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
<x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="border-background absolute end-0 bottom-0 size-3 rounded-full border-2 bg-green-600 dark:bg-green-400" role="img" aria-label="Online"></span>
</div>
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-image src="https://github.com/leerob.png" alt="@leerob" />
<x-ui.avatar-fallback>LR</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="border-background absolute end-0 bottom-0 size-3 rounded-full border-2 bg-amber-500" role="img" aria-label="Away"></span>
</div>
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<x-ui.avatar-fallback>ER</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="border-background bg-destructive absolute end-0 bottom-0 size-3 rounded-full border-2" role="img" aria-label="Busy"></span>
</div>
<div class="relative inline-flex">
<x-ui.avatar class="size-10">
<x-ui.avatar-fallback>JD</x-ui.avatar-fallback>
</x-ui.avatar>
<span class="border-background bg-muted-foreground/50 absolute end-0 bottom-0 size-3 rounded-full border-2" role="img" aria-label="Offline"></span>
</div>
</div>API Reference
Props, slots and exposed methods for
<x-ui.avatar>.
Slots
| Slot | Description |
|---|---|
default |
The avatar content. Compose an <x-ui.avatar-image src alt /> for the photo and an <x-ui.avatar-fallback> with initials; the fallback shows automatically while the image loads or if it fails. Size and shape are set with utility classes (e.g. size-12, rounded-lg). |