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 variants = [
{ label: "Circle", cls: "rounded-full" },
{ label: "Rounded", cls: "rounded-xl" },
{ label: "Square", cls: "rounded-md" },
{ label: "None", cls: "rounded-none" },
];
export default function AvatarRadiusDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="flex flex-col gap-8">
{/* With image */}
<div className="flex items-center gap-6">
{variants.map(({ label, cls }) => (
<div key={label} className="flex flex-col items-center gap-2">
<Avatar className={`size-12 ${cls}`}>
<AvatarImage
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces"
alt="User avatar"
/>
<AvatarFallback className={cls}>JD</AvatarFallback>
</Avatar>
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
{/* Fallback only */}
<div className="flex items-center gap-6">
{variants.map(({ label, cls }) => (
<div key={label} className="flex flex-col items-center gap-2">
<Avatar className={`size-12 ${cls}`}>
<AvatarImage src="/broken.png" alt="User avatar" />
<AvatarFallback className={cls}>JD</AvatarFallback>
</Avatar>
<span className="text-xs text-muted-foreground">{label}</span>
</div>
))}
</div>
</div>
</div>
);
}