One Avatar

Component 9

About

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

Code

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

Usage.tsx

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

const members = [
  {
    name: "shadcn/ui",
    fallback: "SU",
    src: "https://cdn.21st.dev/assets/mirror/51/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg",
    label: "Image crossfades in",
  },
  {
    name: "Edwin Vakayil",
    fallback: "EV",
    label: "Fallback-only state",
  },
  {
    name: "Automation",
    fallback: "AI",
    label: "Immediate initials",
  },
];

export function TeamAvatars() {
  return (
    <div className="flex items-center gap-8">
      {members.map((member) => (
        <div key={member.name} className="flex flex-col items-center gap-2">
          <Avatar
            alt={member.name}
            fallback={member.fallback}
            name={member.name}
            src={member.src}
          />
          <div className="text-center">
            <div className="text-sm font-medium">{member.name}</div>
            <div className="text-xs text-muted-foreground">{member.label}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default TeamAvatars