Component

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

preview
Avatar 1RUAvatar 2PKAvatar 3RS
React
"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

React
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
--
className
string
--

The avatar component for the AvatarGroup.

PropTypeDefault
src
string
--
alt
string
--

The fallback component for the AvatarGroup.

PropTypeDefault
children
React.ReactNode
--
className
string
--
Edit this page on GitHub →