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--
Edit this page on GitHub