# V avatar 18

> Pull request comment thread

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-avatar-18).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-avatar-18
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-avatar-18-light-3dc84a2fe9b8886f.png
- Registry item: https://ui.cnippet.dev/r/v-avatar-18.json
- Categories: avatar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-18.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: `@cnippet/avatar`

## Files

### `registry/default/variants/v-avatar-18.tsx`

```tsx
import { HeartIcon, MessageCircleIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/registry/default/ui/avatar";
import { Button } from "@/registry/default/ui/button";
import { Frame, FramePanel } from "@/registry/default/ui/frame";

const comments = [
  {
    avatar:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80",
    body: "This is a great addition! The implementation looks clean. One suggestion — could we add a `size` variant for compact use cases as well?",
    initials: "AJ",
    likes: 4,
    name: "Alex Johnson",
    time: "2h ago",
  },
  {
    avatar:
      "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
    body: "Agreed on the size variants. Also, the aria-label is missing on the icon-only button — should be easy to fix before merging.",
    initials: "SC",
    likes: 2,
    name: "Sarah Chen",
    time: "1h ago",
  },
  {
    avatar: "https://github.com/shadcn.png",
    body: "Good catches, both addressed in the latest commit. Marking as ready for review.",
    initials: "SH",
    likes: 7,
    name: "shadcn",
    time: "45m ago",
  },
];

export function Pattern() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <Frame>
        <FramePanel className="flex items-center gap-2 px-4 py-2.5!">
          <MessageCircleIcon className="size-4 text-muted-foreground" />
          <span className="font-medium text-sm">
            {comments.length} comments
          </span>
        </FramePanel>
        {comments.map((c, i) => (
          <FramePanel
            className={i === comments.length - 1 ? "rounded-b-xl" : ""}
            key={c.initials}
          >
            <div className="flex gap-3">
              <Avatar className="mt-0.5 size-7 shrink-0">
                <AvatarImage alt={c.name} src={c.avatar} />
                <AvatarFallback className="text-xs">
                  {c.initials}
                </AvatarFallback>
              </Avatar>
              <div className="flex flex-1 flex-col gap-1.5">
                <div className="flex items-center gap-2">
                  <span className="font-semibold text-sm">{c.name}</span>
                  <span className="text-muted-foreground text-xs">
                    {c.time}
                  </span>
                </div>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  {c.body}
                </p>
                <Button
                  className="h-auto w-fit gap-1 p-0 text-muted-foreground"
                  size="xs"
                  variant="ghost"
                >
                  <HeartIcon className="size-3.5" />
                  <span className="text-xs">{c.likes}</span>
                </Button>
              </div>
            </div>
          </FramePanel>
        ))}
      </Frame>
    </div>
  );
}
```