# V scroll area 15

> File Explorer

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

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

```tsx
import { FileIcon, FolderIcon } from "lucide-react";
import { ScrollArea } from "@/registry/default/ui/scroll-area";

const files = [
  { isFolder: true, name: "app", path: "app/" },
  { isFolder: true, name: "components", path: "app/components/" },
  { isFolder: false, name: "layout.tsx", path: "app/layout.tsx" },
  { isFolder: false, name: "page.tsx", path: "app/page.tsx" },
  { isFolder: false, name: "globals.css", path: "app/globals.css" },
  { isFolder: true, name: "lib", path: "lib/" },
  { isFolder: false, name: "utils.ts", path: "lib/utils.ts" },
  { isFolder: false, name: "auth.ts", path: "lib/auth.ts" },
  { isFolder: true, name: "public", path: "public/" },
  { isFolder: false, name: "favicon.ico", path: "public/favicon.ico" },
  { isFolder: false, name: "logo.svg", path: "public/logo.svg" },
  { isFolder: false, name: "next.config.ts", path: "next.config.ts" },
  { isFolder: false, name: "tailwind.config.ts", path: "tailwind.config.ts" },
  { isFolder: false, name: "package.json", path: "package.json" },
  { isFolder: false, name: "tsconfig.json", path: "tsconfig.json" },
];

export default function Particle() {
  return (
    <ScrollArea className="h-64 w-56 rounded-lg border" scrollFade>
      <div className="flex flex-col gap-0.5 p-2">
        {files.map(({ isFolder, name, path }) => {
          const Icon = isFolder ? FolderIcon : FileIcon;
          return (
            <button
              className="flex items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm transition-colors hover:bg-accent"
              key={path}
              type="button"
            >
              <Icon aria-hidden="true" className="size-4 shrink-0 opacity-60" />
              <span className="truncate">{name}</span>
            </button>
          );
        })}
      </div>
    </ScrollArea>
  );
}
```