Avatar Group is used to represent a group of users or a brand. They are used in the header, sidebar, and in the chat.

Avatar 1Avatar 2Avatar 3
import AvatarGroup from "@radui/ui/AvatarGroup";

const avatars = [
  { src: 'https://i.pravatar.cc/64', fallback: 'RU', alt: 'Avatar 1' },
  { src: 'https://i.pravatar.cc/65', fallback: 'PK', alt: 'Avatar 2' },
  { src: 'https://i.pravatar.cc/66', fallback: 'RS', alt: 'Avatar 3' },
]

const AvatarGroupExample = () => (
  <div>
    <AvatarGroup avatars={avatars} />
  </div>
)

export default AvatarGroupExample;

Import all parts of the component and piece them together

import AvatarGroup from "@radui/ui/AvatarGroup";

export default () => {
    return (
        <AvatarGroup.Root>
            <AvatarGroup.AvatarRoot>
                <AvatarGroup.AvatarImage />
                <AvatarGroup.AvatarFallback />
            </AvatarGroup.AvatarRoot>
        </AvatarGroup.Root>
    )
}
Edit this page on GitHub