# V scroll area 11

> Chat Feed

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

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

## Install

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

## Files

### `registry/default/variants/v-scroll-area-11.tsx`

```tsx
import { Avatar, AvatarFallback } from "@/registry/default/ui/avatar";
import { ScrollArea } from "@/registry/default/ui/scroll-area";

const messages = [
  {
    id: 1,
    initials: "A",
    text: "Hey! Are we still on for the review meeting today?",
    time: "9:41 AM",
    user: "Alice",
  },
  {
    id: 2,
    initials: "B",
    text: "Yes, I'll be there. Just finishing up some PRs.",
    time: "9:43 AM",
    user: "Bob",
  },
  {
    id: 3,
    initials: "A",
    text: "Perfect. I've prepared the design handoff notes.",
    time: "9:44 AM",
    user: "Alice",
  },
  {
    id: 4,
    initials: "C",
    text: "Can we push it 30 minutes? My call ends at 2:30.",
    time: "9:47 AM",
    user: "Carol",
  },
  {
    id: 5,
    initials: "B",
    text: "Works for me.",
    time: "9:48 AM",
    user: "Bob",
  },
  {
    id: 6,
    initials: "A",
    text: "Sure! Updated the calendar invite.",
    time: "9:49 AM",
    user: "Alice",
  },
  {
    id: 7,
    initials: "C",
    text: "Thanks! See you all then.",
    time: "9:50 AM",
    user: "Carol",
  },
  {
    id: 8,
    initials: "B",
    text: "One more thing — should we demo the new dashboard too?",
    time: "9:52 AM",
    user: "Bob",
  },
];

export default function Particle() {
  return (
    <ScrollArea className="h-72 w-full max-w-sm rounded-lg border">
      <div className="flex flex-col gap-4 p-4">
        {messages.map(({ id, initials, text, time, user }) => (
          <div className="flex items-start gap-3" key={id}>
            <Avatar className="size-7 shrink-0">
              <AvatarFallback className="text-xs">{initials}</AvatarFallback>
            </Avatar>
            <div className="flex flex-col gap-0.5">
              <div className="flex items-baseline gap-2">
                <span className="font-medium text-sm">{user}</span>
                <span className="text-muted-foreground text-xs">{time}</span>
              </div>
              <p className="text-sm">{text}</p>
            </div>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```