Group Header

Chat header with a 3-avatar stack, group title, member count, and voice / video call buttons.

AKMÖSB

Design Team12 members

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

Import & use

import { Chat3 } from "@/components/beste/piece/chat3";

<Chat3
  title="Design Team"
  count={12}
  membersLabel="members"
  members={[
    {
      "src": "https://images.unsplash.com/photo-1600603405959-6d623e92445c?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fHw%3D",
      "alt": "Ayşe",
      "fallback": "AK"
    },
    {
      "src": "https://images.unsplash.com/photo-1728516687021-905c3feb5046?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D",
      "alt": "Merve",
      "fallback": "MÖ"
    },
    {
      "src": "https://images.unsplash.com/photo-1731341711390-a721b4e31b6a?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D",
      "alt": "Sarah",
      "fallback": "SB"
    }
  ]}
/>