# V scroll area 7

> 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-7).

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

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

const statuses = ["To Do", "In Progress", "Done"] as const;

const cards: { id: number; title: string; tag: (typeof statuses)[number] }[] = [
  { id: 1, tag: "To Do", title: "Update API documentation" },
  { id: 2, tag: "To Do", title: "Design onboarding flow" },
  { id: 3, tag: "To Do", title: "Write unit tests for auth" },
  { id: 4, tag: "In Progress", title: "Refactor dashboard layout" },
  { id: 5, tag: "In Progress", title: "Integrate analytics SDK" },
  { id: 6, tag: "Done", title: "Fix mobile nav bug" },
  { id: 7, tag: "Done", title: "Set up CI pipeline" },
  { id: 8, tag: "Done", title: "Deploy staging environment" },
];

const tagColor: Record<(typeof statuses)[number], string> = {
  Done: "bg-green-500/10 text-green-700 dark:text-green-400",
  "In Progress": "bg-blue-500/10 text-blue-700 dark:text-blue-400",
  "To Do": "bg-muted text-muted-foreground",
};

export default function Particle() {
  return (
    <ScrollArea className="h-80 w-72 rounded-lg border">
      <div className="space-y-2 p-3">
        <p className="font-medium text-sm">Backlog</p>
        {cards.map((card) => (
          <div
            className="rounded-lg border bg-background p-3 shadow-xs"
            key={card.id}
          >
            <p className="text-sm">{card.title}</p>
            <span
              className={`mt-1.5 inline-block rounded px-1.5 py-0.5 font-medium text-xs ${tagColor[card.tag]}`}
            >
              {card.tag}
            </span>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```