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 sizes = [
{ label: "xs", cls: "size-6 text-[10px]" },
{ label: "sm", cls: "size-8 text-xs" },
{ label: "md", cls: "size-10 text-sm" },
{ label: "lg", cls: "size-12 text-base" },
{ label: "xl", cls: "size-16 text-lg" },
{ label: "2xl", cls: "size-20 text-xl" },
];
export default function AvatarSizesDemo() {
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-end gap-4">
{sizes.map(({ label, cls }) => (
<div key={label} className="flex flex-col items-center gap-2">
<Avatar className={cls}>
<AvatarImage
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=faces"
alt="User avatar"
/>
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
<div className="flex items-end gap-4">
{sizes.map(({ label, cls }) => (
<div key={label} className="flex flex-col items-center gap-2">
<Avatar className={cls}>
<AvatarImage src="/broken.png" alt="User avatar" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
</div>
</div>
);
}