{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "virtualized-list",
  "type": "registry:ui",
  "title": "Virtualized list",
  "description": "Virtualized list that renders only the visible rows plus a small buffer, using a fixed item height and absolute positioning. Keeps thousands of React rows fast.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/virtualized-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/virtualized-list.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nconst SAMPLE_CUSTOMERS = [\"Northwind Traders\", \"Halcyon Health\", \"Fathom Analytics\", \"Meridian Labs\", \"Quill & Co\", \"Tessel Robotics\"]\n\n/** Renders a sample invoice row; replace it with your own `renderItem`. */\nfunction sampleRow(index: number) {\n  return (\n    <div className=\"flex h-10 items-center justify-between border-b border-border px-3 text-[13px]\">\n      <span className=\"font-mono text-fg-muted\">INV-{String(10000 - index).padStart(5, \"0\")}</span>\n      <span className=\"text-fg\">{SAMPLE_CUSTOMERS[index % SAMPLE_CUSTOMERS.length]}</span>\n      <span className=\"tabular-nums text-fg-muted\">${((index * 7919) % 9000 + 450).toLocaleString(\"en-US\")}</span>\n    </div>\n  )\n}\n\n/** A fixed-row-height windowed list that renders only the rows in view. Defaults to a 10,000 row sample. */\nfunction VirtualizedList({\n  count = 10000,\n  itemHeight = 40,\n  height = 320,\n  renderItem = sampleRow,\n  className,\n}: {\n  count?: number\n  itemHeight?: number\n  height?: number\n  renderItem?: (index: number) => React.ReactNode\n  className?: string\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [scrollTop, setScrollTop] = React.useState(0)\n  const start = Math.max(0, Math.floor(scrollTop / itemHeight) - 5)\n  const visible = Math.ceil(height / itemHeight) + 10\n  const end = Math.min(count, start + visible)\n  return (\n    <div\n      ref={ref}\n      data-slot=\"virtualized-list\"\n      className={cn(\"w-full max-w-md overflow-auto rounded-xl border border-border bg-surface\", className)}\n      style={{ height }}\n      onScroll={(e) => setScrollTop((e.target as HTMLDivElement).scrollTop)}\n    >\n      <div style={{ height: count * itemHeight, position: \"relative\" }}>\n        {Array.from({ length: end - start }, (_, i) => {\n          const index = start + i\n          return (\n            <div key={index} style={{ position: \"absolute\", top: index * itemHeight, left: 0, right: 0, height: itemHeight }}>\n              {renderItem(index)}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\nexport { VirtualizedList }\n"
    }
  ]
}