Avatar Circles Demo

PreviousNext

Example showing overlapping avatar circles.

Docs
magicuiexample

Preview

Loading preview…
registry/example/avatar-circles-demo.tsx
import { AvatarCircles } from "@/registry/magicui/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",
  },
  {
    imageUrl: "https://avatars.githubusercontent.com/u/106103625",
    profileUrl: "https://github.com/BankkRoll",
  },
  {
    imageUrl: "https://avatars.githubusercontent.com/u/59228569",
    profileUrl: "https://github.com/safethecode",
  },
  {
    imageUrl: "https://avatars.githubusercontent.com/u/59442788",
    profileUrl: "https://github.com/sanjay-mali",
  },
  {
    imageUrl: "https://avatars.githubusercontent.com/u/89768406",
    profileUrl: "https://github.com/itsarghyadas",
  },
]

export default function AvatarCirclesDemo() {
  return <AvatarCircles numPeople={99} avatarUrls={avatars} />
}

Installation

npx shadcn@latest add @magicui/avatar-circles-demo

Usage

import { AvatarCirclesDemo } from "@/components/avatar-circles-demo"
<AvatarCirclesDemo />