Avatar

Component 2

About

An image element with a fallback for representing the user

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, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function DemoOne() {
  return(
    <>
      <div className="flex gap-4 flex-wrap items-center">
        <Avatar>
          <AvatarImage
            src="https://cdn.21st.dev/assets/mirror/ec/ec6932b254be4c47996fc520cb1d46f0e09e67ddb0badd09e96b77bbadc659c3.png"
            alt="@preetsuthar17"
          />
          <AvatarFallback>PS</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://cdn.21st.dev/assets/mirror/d0/d05851c9f67bdeeafc09a8c1d4ed5ba895f5db202c7f8ba785c9c62845cccf7c.jpg" alt="@fuma-nama" />
          <AvatarFallback>FN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>JD</AvatarFallback>
        </Avatar>
      </div>
    </>
  );
}