# Compact social proof with initials

> Compact social proof with initials

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-avatar-21).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-avatar-21
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-avatar-21-light-c27ee08263e4c26a.png
- Registry item: https://reui.io/r/new-york-v4/c-avatar-21.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-avatar-21.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `avatar`, `@reui/frame`

## Files

### `c-avatar-21.tsx`

```tsx
import { Frame, FramePanel } from "@/components/reui/frame"

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar"

export function Pattern() {
  return (
    <Frame>
      <FramePanel className="flex items-center gap-2 p-2!">
        <AvatarGroup>
          <Avatar className="size-7">
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>CH</AvatarFallback>
          </Avatar>
          <Avatar className="size-7">
            <AvatarImage
              src="https://github.com/maxleiter.png"
              alt="@maxleiter"
            />
            <AvatarFallback>CH</AvatarFallback>
          </Avatar>
          <Avatar className="size-7">
            <AvatarImage
              src="https://github.com/evilrabbit.png"
              alt="@evilrabbit"
            />
            <AvatarFallback>CH</AvatarFallback>
          </Avatar>
          <Avatar className="size-7">
            <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
            <AvatarFallback>CH</AvatarFallback>
          </Avatar>
        </AvatarGroup>

        <p className="text-muted-foreground me-1.5 text-xs">
          Joined by <span className="text-foreground font-semibold">500+</span>{" "}
          developers.
        </p>
      </FramePanel>
    </Frame>
  )
}
```