Avatar Circles

Component 626

About

Overlapping circles of avatars.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Circles to your project and fits it to your theme.

Code

How Avatar Circles is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AvatarCircles } from "@/components/ui/avatar-circles"

const avatarUrls = [
  "https://cdn.21st.dev/assets/mirror/5a/5a264107cf93f397985960a11e0c28ff088436596d967e309ee8f4de8874d0fe.png",
  "https://cdn.21st.dev/assets/mirror/bd/bd554ca85e90920541180b2639be2f27f11d8bea30222de60e3e4d4d337ac0f7.jpg",
  "https://cdn.21st.dev/assets/mirror/ae/aeaaab9033f0efac9a1db6d28bb2ef0e19878d4dcf47282de4d3319b532beedb.png",
  "https://cdn.21st.dev/assets/mirror/87/87599b022ed7ef51132783258902f337d6a031527270768aba52a7ecb1a1de3e.jpg",
]

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