Avatar Group
A component that arranges avatars with overlapping visual effects for displaying multiple users or items.
Installation
pnpm dlx shadcn@latest add @diceui/avatar-group
Layout
import { AvatarGroup } from "@/components/ui/avatar-group";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
<AvatarGroup>
<Avatar>
<AvatarImage src="/tony-hawk.png" />
<AvatarFallback>TH</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="/rodney-mullen.png" />
<AvatarFallback>RM</AvatarFallback>
</Avatar>
</AvatarGroup>Examples
With Truncation
Automatically truncate long lists and show overflow indicators with the max prop.
With RTL
Support for right-to-left layouts and vertical RTL stacking.
With Icons
Use the Avatar Group component with icons or other elements beyond avatars.
Custom Overflow
Customize the overflow indicator with the renderOverflow prop.
API Reference
AvatarGroup
The main avatar group container that handles layout and masking of child elements.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |