Avatar Group is used to represent a group of users or a brand. They are used in the header, sidebar, and in the chat.
"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.
Prop | Type | Default |
---|---|---|
customRootClass | string | -- |
className | string | -- |
size | string | -- |
variant | string | -- |
children | React.ReactNode | -- |
The item component for the AvatarGroup.
Prop | Type | Default |
---|---|---|
color | string | -- |
children | React.ReactNode | -- |
The avatar component for the AvatarGroup.
Prop | Type | Default |
---|---|---|
src | string | -- |
alt | string | -- |
The fallback component for the AvatarGroup.
Prop | Type | Default |
---|---|---|
children | React.ReactNode | -- |