[feat]: Add Avatar Group

[darshansrc]

Feature description

Feature Request: Add Avatar Group Component

Description: I would like to request the addition of an Avatar Group component to the Shadcn UI component library. The Avatar Group component would allow for the display of multiple avatars in a single group, which is useful for representing groups of users or contacts.

Functionality:

• Ability to add multiple avatars to the group.
• Customizable size and spacing between avatars.
• Support for different layouts (e.g., horizontal, vertical, grid).
• Clickable avatars that can trigger events or display more information.

Use Case: This component would be particularly useful in social networking apps, messaging apps, and collaboration platforms where displaying groups of users is common.

Implementation Ideas:

• Use a flexbox or grid layout to position the avatars.
• Provide props for setting the size, spacing, and layout of the avatars.
• Allow for adding avatars dynamically (e.g., via an array of avatar URLs).

Example from antd is attached below:

Affected component/components

avatar

Additional Context

Additional details here...

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[abdullahnauman2]

Hi. I would love to take on this issue and work on implementing the Avatar Group component. I'm making this open source contribution as part of a university course, and part of the requirement is to have test coverage. Does the shadcn-ui library use some sort of golden test coverage with image diffs for regression testing on UI components?

[gojnimer6553]

I have a working draft implementation of that, tomorrow i’ll post here

[darshansrc]

Would love to see it! Needed it from shadcn only as i don't want to install one more UI Library

[gojnimer6553]

Here's my initial implementation. Pretty raw code, but maybe it will help you guys creating your own components

avatar-stack.zip

[darshansrc]

Looks good!

[JuanDa237]

503

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Lihemen]

Oh no, this has gone stale.😱😱

This would be a great feature to have in ShadCN; just like the MUI avatar groups and many other component libraries

[shadcn]

Let’s reopen it.

[pxlgrdnr]

Would love to see this feature

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[JuanDa237]

Let’s reopen it.

closed again :(

[scriptcoded]

Maybe a no-close label would be reasonable here? 😊