Avatar

Component 150

About

Enchanced shadcn/ui avatar

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

function Component() {
  return (
    <div className="flex -space-x-3">
      <img
        className="rounded-full ring-2 ring-background"
        src="https://cdn.21st.dev/assets/localized/8ab4cd865aa6b62352300cf71c5805c86d8523505636e2a499cda7932a803953.jpg"
        width={40}
        height={40}
        alt="Avatar 01"
      />
      <img
        className="rounded-full ring-2 ring-background"
        src="https://cdn.21st.dev/assets/localized/a2ee1266115ad682a19f5d4752ea8efa7eefa3ae03e658f500cbb3e1a6145b0b.jpg"
        width={40}
        height={40}
        alt="Avatar 02"
      />
      <img
        className="rounded-full ring-2 ring-background"
        src="https://cdn.21st.dev/assets/localized/f8db32ee1fe8c51fa678e3325eee3f8bf72a3a8cc8947784d5ef9c7bf5fb8adb.jpg"
        width={40}
        height={40}
        alt="Avatar 03"
      />
      <img
        className="rounded-full ring-2 ring-background"
        src="https://cdn.21st.dev/assets/localized/449ffab8e7b480176aaea3dd5578119223a41e2e0c92c805a5a6b71ca4cbdd14.jpg"
        width={40}
        height={40}
        alt="Avatar 04"
      />
    </div>
  );
}

export { Component };

export default Component;