# Avatar social proof with text label

> Avatar social proof with text label

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-avatar-20
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-avatar-20-light-3a7608e48c50b501.png
- Registry item: https://reui.io/r/new-york-v4/c-avatar-20.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-20.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`

## Files

### `c-avatar-20.tsx`

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

export function Pattern() {
  return (
    <div className="border-border rounded-full flex items-center gap-1.5 border p-1 shadow-sm shadow-black/5">
      <AvatarGroup>
        <Avatar className="size-7">
          <AvatarImage
            src="https://images.unsplash.com/photo-1542595913-85d69b0edbaf?w=96&h=96&dpr=2&q=80"
            alt="Liam Thompson"
          />
          <AvatarFallback>LT</AvatarFallback>
        </Avatar>
        <Avatar className="size-7">
          <AvatarImage
            src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80"
            alt="Nick Johnson"
          />
          <AvatarFallback>NJ</AvatarFallback>
        </Avatar>
        <Avatar className="size-7">
          <AvatarImage
            src="https://images.unsplash.com/photo-1620075225255-8c2051b6c015?w=96&h=96&dpr=2&q=80"
            alt="Maria Garcia"
          />
          <AvatarFallback>MG</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">
        Trusted by <span className="text-foreground font-semibold">100K+</span>{" "}
        users.
      </p>
    </div>
  )
}
```