Avatar Group

Name: Rad UI
Author: Rad UI Team

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

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;

API Documentation

Anatomy

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

Root

The root component for the AvatarGroup.

Prop	Type	Default
customRootClass	string	--
className	string	--
size	string	--
variant	string	--
children	React.ReactNode	--

Item

The item component for the AvatarGroup.

Prop	Type	Default
color	string	--
children	React.ReactNode	--
className	string	--

Avatar

The avatar component for the AvatarGroup.

Prop	Type	Default
src	string	--
alt	string	--

Fallback

The fallback component for the AvatarGroup.

Prop	Type	Default
children	React.ReactNode	--
className	string	--

Under Construction