A component that displays user avatars in overlapping circles, perfect for showing team members or participants.
Installation
npx shadcn@latest add @magicui/avatar-circles
Usage
import { AvatarCircles } from "@/components/ui/avatar-circles"
const avatars = [
{
imageUrl: "https://avatars.githubusercontent.com/u/16860528",
profileUrl: "https://github.com/dillionverma",
},
{
imageUrl: "https://avatars.githubusercontent.com/u/20110627",
profileUrl: "https://github.com/tomonarifeehan",
},
]
export default function Example() {
return <AvatarCircles numPeople={99} avatarUrls={avatars} />
}
Props
Array of avatar objects containing imageUrl and profileUrl
Number to display in the final circle (typically for ”+ more” indicator)
Additional CSS classes to apply to the component
Avatar Object
interface Avatar {
imageUrl: string
profileUrl: string
}
Features
- Overlapping circular avatar design
- Clickable avatars linking to profiles
- Optional count indicator for additional users
- Responsive and accessible
- RTL language support
Credits
Created by tomonarifeehan