Principles
Rad UI is under active development and looking for contributors to shape the future of the library. If you'd like to contribute to Rad UI, please check out Getting Started

AvatarGroup are used to toggle the visibility of content. They are used in the sidebar, and in the chat.

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

let 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>
    )
}