Avatar

An avatar component with image, fallback text, multiple sizes, border radius variants, and group stacking. Built on Base UI Avatar primitives.

cossbycoss

import { 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://cdn.21st.dev/assets/mirror/b6/b687bae11668611470abae806b85b1f273268ee5152437fa1cae93206afaccd5.jpg"
                  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>
  );
}