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";
export default function AvatarDefaultDemo() {
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-8">
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces"
alt="User avatar"
/>
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-medium text-foreground">Jane Doe</p>
<p className="text-xs text-muted-foreground">jane@example.com</p>
</div>
</div>
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&fit=crop&crop=faces"
alt="User avatar"
/>
<AvatarFallback>JN</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-medium text-foreground">John Newman</p>
<p className="text-xs text-muted-foreground">john@example.com</p>
</div>
</div>
</div>
</div>
);
}