Avatar Group

Component 245

About

A component that displays a group of avatars.

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

Code

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

Usage.tsx

import { AvatarGroup } from "@/components/ui/avatar-group";

function Demo() {
  return (
    <>
      <AvatarGroup
        avatars={[
          {
            src: "https://cdn.21st.dev/assets/localized/93a83c5c8e642d720f621c63e91da2f4ce5a2689d66904a476936888bf5d9778.png",
            label: "preett",
          },
          {
            src: "https://cdn.21st.dev/assets/mirror/65/6519e1a47e6a046bff27ea857681d93fd7e49f19f7f5d524874fc91cd7fb605d.png",
            label: "21st.dev",
          },
          {
            src: "https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg",
            label: "shadcn",
          },
          {
            src: "https://cdn.21st.dev/assets/localized/92db5b0ae3b97eefb3308b3ad28645caaaf0a5125369b81c7cb8a8df1a610043.svg",
            label: "HextaUI",
          },
          {
            src: "https://cdn.21st.dev/assets/localized/92db5b0ae3b97eefb3308b3ad28645caaaf0a5125369b81c7cb8a8df1a610043.svg",
            label: "HextaUI",
          },
          {
            src: "https://cdn.21st.dev/assets/localized/92db5b0ae3b97eefb3308b3ad28645caaaf0a5125369b81c7cb8a8df1a610043.svg",
            label: "HextaUI",
          },
        ]}
        maxVisible={4}
        size={45}
      />
    </>
  );
}

export { Demo };

export default Demo;