Avatar Group
React avatar group that stacks overlapping avatars with tooltips, lifts one on hover, collapses extras into a +N chip with a popover list and falls back to tinted initials.
src/registry/ui/avatar-group.tsx/r/avatar-group.json
Installation#
bash
npx shadcn@latest add https://ui.minidev.pro/r/avatar-group.json
Usage#
tsx
import { AvatarGroup } from "@/components/ui/avatar-group"
export function Example() {
return <AvatarGroup />
}
API reference#
| Prop | Type | Default |
|---|---|---|
people | AvatarGroupPerson[] | TEAM |
max | number | 5 |
size | Size | "md" |
label | string | "Northwind team" |
summary | boolean | true |
className | string | - |
Dependencies#
Related layout components#
AccordionAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.App ShellTailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.Aspect RatioShadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.CardShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.CenterLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.ClusterFlex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.
All layout components