Avatar Group

A component that displays a group of avatars.

Preview

This component is available on 21st.dev.

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/hextaui/avatar-group"

Usage

App.tsx

import { AvatarGroup } from "@/components/ui/AvatarGroup";
<AvatarGroup
  avatars={[
    { src: "/logo.png", label: "HextaUI" },
    { src: "/logo.png", label: "HextaUI" },
    { src: "/logo.png", label: "HextaUI" },
    { src: "/logo.png", label: "HextaUI" },
    { src: "/logo.png", label: "HextaUI" },
  ]}
  maxVisible={4}
  size={50}
/>;

Props

Prop	Type	Default
`overlap?`	`number`	-
`size?`	`number`	-
`maxVisible?`	`number`	-
`avatars`	`{ src: string; alt?: string \| undefined; label?: string \| undefined; }[]`	-