Components
Avatar
Avatar
User profile images.
Image Avatar
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=1" /></span><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=1" /></span>Initials Avatar
JD
<span class="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground">JD</span><span className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground">JD</span>Square Avatar
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=2" /></span><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=2" /></span>Large Avatar
<span class="relative flex h-16 w-16 shrink-0 overflow-hidden rounded-full"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=3" /></span><span className="relative flex h-16 w-16 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=3" /></span>Small Avatar
<span class="relative flex h-6 w-6 shrink-0 overflow-hidden rounded-full"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=4" /></span><span className="relative flex h-6 w-6 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=4" /></span>Avatar Group
<div class="flex -space-x-4"><img class="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=4" /><img class="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=5" /><img class="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=6" /></div><div className="flex -space-x-4"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=4" /><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=5" /><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=6" /></div>Online Status
<div class="relative inline-block"><span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=7" /></span><span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-background"></span></div><div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=7" /></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-background"></span></div>Offline Status
<div class="relative inline-block"><span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=8" /></span><span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-gray-500 ring-2 ring-background"></span></div><div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=8" /></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-gray-500 ring-2 ring-background"></span></div>Busy Status
<div class="relative inline-block"><span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=9" /></span><span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-background"></span></div><div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=9" /></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-background"></span></div>Avatar with Ring
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-primary ring-offset-2 ring-offset-background"><img class="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=10" /></span><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-primary ring-offset-2 ring-offset-background"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=10" /></span>