# V scroll area 6

> Basic scroll area

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

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-scroll-area-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-scroll-area-6-light-26c072a912ea2125.png
- Registry item: https://ui.cnippet.dev/r/v-scroll-area-6.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-6.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-6.tsx`

```tsx
//biome-ignore-all lint/suspicious/noAssignInExpressions:<>
import { ScrollArea } from "@/registry/default/ui/scroll-area";

const contacts = [
  { name: "Alice Brown", role: "Designer" },
  { name: "Aaron Chen", role: "Engineer" },
  { name: "Bob Davis", role: "Product" },
  { name: "Beth Evans", role: "Engineer" },
  { name: "Charlie Fox", role: "Marketing" },
  { name: "Chris Grant", role: "Sales" },
  { name: "Diana Hall", role: "Engineer" },
  { name: "David Irons", role: "Designer" },
  { name: "Elena James", role: "Engineer" },
  { name: "Frank King", role: "Product" },
  { name: "Grace Lee", role: "Engineer" },
  { name: "Henry Moon", role: "Sales" },
];

const grouped = contacts.reduce<Record<string, typeof contacts>>(
  (acc, contact) => {
    const letter = contact.name[0] ?? "#";
    (acc[letter] ??= []).push(contact);
    return acc;
  },
  {},
);

export default function Particle() {
  return (
    <ScrollArea className="h-72 w-full max-w-xs rounded-lg border">
      <div className="p-2">
        {Object.entries(grouped).map(([letter, items]) => (
          <div key={letter}>
            <p className="sticky top-0 bg-background px-2 py-1 font-semibold text-muted-foreground text-xs">
              {letter}
            </p>
            {items.map((c) => (
              <div
                className="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-muted"
                key={c.name}
              >
                <span className="text-sm">{c.name}</span>
                <span className="text-muted-foreground text-xs">{c.role}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```