Avatar
User image with a fallback.
Import
tsx
import { Avatar } from "@cooud-ui/ui";
bash
npx cooud-ui add avatar
On this page
User image with a fallback.
import { Avatar } from "@cooud-ui/ui";
npx cooud-ui add avatar
On this page
A user image alongside deterministic initials-only fallbacks.
<div className="flex items-center gap-4"><Avatar><AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /><AvatarFallback>CN</AvatarFallback></Avatar><Avatar><AvatarFallback>AL</AvatarFallback></Avatar><Avatar><AvatarFallback>CU</AvatarFallback></Avatar></div>
A stack of overlapping avatars with a ring to separate each layer.
<div className="flex -space-x-3">{["CN", "AL", "JL", "MK"].map((initials) => (<Avatar key={initials} className="ring-2 ring-surface-raised"><AvatarFallback>{initials}</AvatarFallback></Avatar>))}<Avatar className="ring-2 ring-surface-raised"><AvatarFallback className="text-xs">+5</AvatarFallback></Avatar></div>