Avatar

Component

About

Here is Avatar component

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

// Mixed avatars (image + text)

import Component from "@/components/ui/avatar-2";

export default function AvatarMixed() {
  return (
    <div className="flex items-center gap-4">
      <Component
        size="x-large"
        variant="neutral"
        square
        image="https://cdn.21st.dev/assets/mirror/eb/eb753e4c1befc24673f1434f9b3acbfeb175a009b5ce4be3f7b2377f1343b37e.jpg"
      />
      <Component
        size="medium"
        variant="warning"
        image="https://cdn.21st.dev/assets/mirror/72/725a297f2d58a8bcdf5a76624b43741822aaf41c1ff4437891c239d4a24ebc03.jpg"
      />
    </div>
  );
}