Attendees Strip

Stacked avatar row with a +N overflow chip, total attendee count, and a social-proof summary line.

JR+123

128 attendingBeste Sözen, Andrea Kim and 126 others are going

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Event8 } from "@/components/beste/piece/event8";

<Event8
  total={128}
  avatars={[
    {
      "initials": "BS",
      "image": "https://images.unsplash.com/photo-1630543092182-325fb1747e8a?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fHw%3D"
    },
    {
      "initials": "AK",
      "image": "https://images.unsplash.com/photo-1637867164935-7bd2e94c690a?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D"
    },
    {
      "initials": "PS",
      "image": "https://images.unsplash.com/photo-1646678669631-a88ba087bdac?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D"
    },
    {
      "initials": "KO",
      "image": "https://images.unsplash.com/photo-1642635785885-f0883f842c38?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHx8"
    },
    {
      "initials": "JR"
    }
  ]}
  label="Beste Sözen, Andrea Kim and 126 others are going"
/>