Avatar

Component 30

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 users = [
  {
    id: 1,
    name: "John Doe",
    src: "https://cdn.21st.dev/assets/mirror/de/defa32ddb23b6307c5cb8d701022186645dfcee057d2b0ba9ec1955dea22db70.jpg",
    fallback: "JD",
  },
  {
    id: 2,
    name: "Kate Wilson",
    src: "https://cdn.21st.dev/assets/mirror/c4/c48cdbaa2058ca5420edd44e17537d7f2cbaab72f5ae01e5738fa82f3d090ba1.jpg",
    fallback: "KW",
  },
  {
    id: 3,
    name: "Emily Chen",
    src: "https://cdn.21st.dev/assets/mirror/df/dfed184450806d7a0a9d72c650f73979ae15b522cb8e65fade232bb5ec55ca72.jpg",
    fallback: "EC",
  },
  {
    id: 4,
    name: "Michael Brown",
    src: "https://cdn.21st.dev/assets/mirror/8b/8b15ec8c71b3a381b6c8117f340742e4f429ab0b65af5c3b220d01a700f0e08d.jpg",
    fallback: "MB",
  },
];

export default function AvatarGroupDemo() {
  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-6">
        <div className="flex -space-x-2">
          {users.map((user) => (
            <Avatar key={user.id} className="ring-2 ring-background">
              <Avatar.Image alt={user.name} src={user.src} />
              <Avatar.Fallback>{user.fallback}</Avatar.Fallback>
            </Avatar>
          ))}
        </div>
        <div className="flex -space-x-2">
          {users.slice(0, 3).map((user) => (
            <Avatar key={user.id} className="ring-2 ring-background">
              <Avatar.Image alt={user.name} src={user.src} />
              <Avatar.Fallback>{user.fallback}</Avatar.Fallback>
            </Avatar>
          ))}
          <Avatar className="ring-2 ring-background">
            <Avatar.Fallback>+2</Avatar.Fallback>
          </Avatar>
        </div>
      </div>
    </div>
  );
}

export { AvatarGroupDemo };