Avatar

Component 13

About

Display user profile images with customizable fallback content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar to your project and fits it to your theme.

Code

How Avatar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Avatar } from "@/components/ui/heroui-avatar";

const colors = ["accent", "default", "success", "warning", "danger"] as const;
const variants = [
  { label: "letter", type: "letter", content: "AG" },
  { label: "letter soft", type: "letter soft", content: "AG" },
  { label: "icon", type: "icon", content: "icon" },
  { label: "icon soft", type: "icon soft", content: "icon soft" },
  {
    label: "img",
    type: "img",
    content: [
      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/default.png",
      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/sky.png",
      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/lavender.png",
      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/mint.png",
      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/netflix.png",
    ],
  },
];

function PersonIcon() {
  return (
    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M8 8.5c3.85 0 7 2.5 7 4.5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2c0-2 3.15-4.5 7-4.5M8 10c-1.61 0-3.064.526-4.092 1.234C2.798 12.001 2.5 12.733 2.5 13a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5c0-.267-.297-1-1.408-1.766C11.064 10.526 9.609 10 8 10m0-9a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7m0 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4"
        fill="currentColor"
      />
    </svg>
  );
}

export default function AvatarVariantsDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="flex flex-col gap-4">
        <div className="flex items-center gap-3">
          <div className="w-24 shrink-0" />
          {colors.map((color) => (
            <div key={color} className="flex w-20 shrink-0 items-center justify-center">
              <span className="text-xs capitalize text-zinc-500 dark:text-zinc-400">{color}</span>
            </div>
          ))}
        </div>

        <div className="h-px bg-zinc-200 dark:bg-zinc-800" />

        {variants.map((variant) => (
          <div key={variant.label} className="flex items-center gap-3">
            <div className="w-24 shrink-0 text-sm text-zinc-500 dark:text-zinc-400">{variant.label}</div>
            {colors.map((color, colorIndex) => (
              <div key={color} className="flex w-20 shrink-0 items-center justify-center">
                <Avatar color={color} variant={variant.type.includes("soft") ? "soft" : undefined}>
                  {variant.type === "img" ? (
                    <>
                      <Avatar.Image
                        alt={`Avatar ${color}`}
                        src={Array.isArray(variant.content) ? variant.content[colorIndex] : ""}
                      />
                      <Avatar.Fallback>{color.charAt(0).toUpperCase()}</Avatar.Fallback>
                    </>
                  ) : variant.type.includes("icon") ? (
                    <Avatar.Fallback>
                      <PersonIcon />
                    </Avatar.Fallback>
                  ) : (
                    <Avatar.Fallback>{variant.content}</Avatar.Fallback>
                  )}
                </Avatar>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

export { AvatarVariantsDemo };