Components
Loading preview...
An avatar component with image, fallback text, multiple sizes, border radius variants, and group stacking. Built on Base UI Avatar primitives.
npx shadcn@latest add https://21st.dev/r/coss.com/coss-avatarimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/component";
const users = [
{
src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces",
fallback: "JD",
name: "Jane Doe",
},
{
src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&fit=crop&crop=faces",
fallback: "JN",
name: "John Newman",
},
{
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=faces",
fallback: "MK",
name: "Mark K",
},
{
src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&fit=crop&crop=faces",
fallback: "SA",
name: "Sara A",
},
{
src: "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?w=96&h=96&fit=crop&crop=faces",
fallback: "TL",
name: "Tom L",
},
];
export default function AvatarGroupDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="flex flex-col items-center gap-10">
{/* Standard group */}
<div className="flex items-center">
{users.slice(0, 4).map((user, i) => (
<Avatar
key={user.fallback}
className="size-10 ring-2 ring-background"
style={{ marginLeft: i === 0 ? 0 : "-10px", zIndex: users.length - i }}
title={user.name}
>
<AvatarImage src={user.src} alt={user.name} />
<AvatarFallback>{user.fallback}</AvatarFallback>
</Avatar>
))}
<Avatar
className="size-10 ring-2 ring-background bg-muted"
style={{ marginLeft: "-10px", zIndex: 0 }}
>
<AvatarFallback className="text-xs font-medium text-muted-foreground bg-muted">
+5
</AvatarFallback>
</Avatar>
</div>
{/* Small group */}
<div className="flex items-center">
{users.map((user, i) => (
<Avatar
key={user.fallback}
className="size-8 ring-2 ring-background"
style={{ marginLeft: i === 0 ? 0 : "-8px", zIndex: users.length - i }}
title={user.name}
>
<AvatarImage src={user.src} alt={user.name} />
<AvatarFallback className="text-[10px]">{user.fallback}</AvatarFallback>
</Avatar>
))}
</div>
{/* Fallback group */}
<div className="flex items-center">
{users.slice(0, 4).map((user, i) => (
<Avatar
key={user.fallback}
className="size-10 ring-2 ring-background"
style={{ marginLeft: i === 0 ? 0 : "-10px", zIndex: users.length - i }}
title={user.name}
>
<AvatarImage src="/broken.png" alt={user.name} />
<AvatarFallback>{user.fallback}</AvatarFallback>
</Avatar>
))}
</div>
</div>
</div>
);
}