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 1RUAvatar 2PKAvatar 3RS
"use client"; import AvatarGroup from "@radui/ui/AvatarGroup"; const AvatarGroupExample = () => ( <AvatarGroup.Root> <AvatarGroup.Item color='blue'> <AvatarGroup.Avatar src="https://i.pravatar.cc/64" alt="Avatar 1" /> <AvatarGroup.Fallback>RU</AvatarGroup.Fallback> </AvatarGroup.Item> <AvatarGroup.Item color='red'> <AvatarGroup.Avatar src="https://i.pravatar.cc/65" alt="Avatar 2" /> <AvatarGroup.Fallback>PK</AvatarGroup.Fallback> </AvatarGroup.Item> <AvatarGroup.Item color='green'> <AvatarGroup.Avatar src="https://i.pravatar.cc/66" alt="Avatar 3" /> <AvatarGroup.Fallback>RS</AvatarGroup.Fallback> </AvatarGroup.Item> </AvatarGroup.Root> ) 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.Item> <AvatarGroup.Avatar /> <AvatarGroup.Fallback /> </AvatarGroup.Item> </AvatarGroup.Root> ) }

The root component for the AvatarGroup.

PropTypeDefault

customRootClass

string--

className

string--

size

string--

variant

string--

children

React.ReactNode--

The item component for the AvatarGroup.

PropTypeDefault

color

string--

children

React.ReactNode--

The avatar component for the AvatarGroup.

PropTypeDefault

src

string--

alt

string--

The fallback component for the AvatarGroup.

PropTypeDefault

children

React.ReactNode--