# V scroll area 13

> Sidebar Navigation

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

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

```tsx
import {
  BellIcon,
  FolderIcon,
  LayoutDashboardIcon,
  SettingsIcon,
  ShieldIcon,
  UsersIcon,
} from "lucide-react";
import { ScrollArea } from "@/registry/default/ui/scroll-area";

const sections = [
  {
    items: [
      { Icon: LayoutDashboardIcon, label: "Overview" },
      { Icon: FolderIcon, label: "Projects" },
      { Icon: UsersIcon, label: "Team" },
    ],
    title: "Workspace",
  },
  {
    items: [
      { Icon: SettingsIcon, label: "General" },
      { Icon: ShieldIcon, label: "Security" },
      { Icon: UsersIcon, label: "Members" },
    ],
    title: "Settings",
  },
  {
    items: [
      { Icon: FolderIcon, label: "Assets" },
      { Icon: LayoutDashboardIcon, label: "Analytics" },
      { Icon: BellIcon, label: "Alerts" },
    ],
    title: "Resources",
  },
];

export default function Particle() {
  return (
    <ScrollArea className="h-72 w-48 rounded-lg border">
      <div className="flex flex-col gap-4 p-3">
        {sections.map(({ items, title }) => (
          <div key={title}>
            <p className="mb-1 px-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">
              {title}
            </p>
            <div className="flex flex-col gap-0.5">
              {items.map(({ Icon, label }, idx) => (
                <button
                  className={`flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent ${title === "Workspace" && idx === 0 ? "bg-accent" : ""}`}
                  key={label}
                  type="button"
                >
                  <Icon aria-hidden="true" className="size-4 opacity-70" />
                  {label}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```