{
  "schemaVersion": 1,
  "name": "scroll-area",
  "useFor": "Use for a panel with its own scroll (the email list, the event catalog, a long menu) inside a fixed-height layout. Give it a height (h-80, flex-1 in a column). Add a horizontal ScrollBar for wide content.",
  "constraints": [
    "Nested scroll areas in the same direction",
    "Hiding the bar entirely on desktop",
    "A dark thumb"
  ],
  "documentation": "",
  "source": "Extrapolated from the Inkbox console (Figma 427:2715): the inbox and event lists, the field edge color for the thumb",
  "exports": [
    "ScrollArea",
    "ScrollBar"
  ],
  "client": true,
  "docsUrl": "https://inkbox-ds.vercel.app/components/scroll-area",
  "markdownUrl": "https://inkbox-ds.vercel.app/r/scroll-area.md",
  "examples": [
    {
      "path": "examples/scroll-area.tsx",
      "content": "import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst EVENTS = Array.from({ length: 24 }, (_, i) => `message.${[\"sent\", \"delivered\", \"bounced\", \"received\"][i % 4]}.${i + 1}`);\n\nexport function Preview() {\n  return (\n    <ScrollArea className=\"h-72 w-64 rounded-panel border border-line-subtle\">\n      <div className=\"p-3\">\n        <p className=\"mb-2 text-body-sm text-fg-label\">Events</p>\n        {EVENTS.map((event, i) => (\n          <div key={event}>\n            {i > 0 && <Separator className=\"my-2\" />}\n            <p className=\"text-body text-fg\">{event}</p>\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  );\n}\n\nexport function Horizontal() {\n  return (\n    <ScrollArea className=\"w-full max-w-96 rounded-panel border border-line-subtle whitespace-nowrap\">\n      <div className=\"flex w-max gap-3 p-3\">\n        {[\"Hermes\", \"Openclaw\", \"Codex\", \"Claude Code\", \"OpenCode\", \"Other\", \"Cursor\", \"Windsurf\"].map((name) => (\n          <span key={name} className=\"flex h-9 items-center rounded-control bg-subtle px-3 text-body text-fg\">\n            {name}\n          </span>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n}\n",
      "exports": [
        "Preview",
        "Horizontal"
      ],
      "requires": [
        "scroll-area",
        "separator"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Preview",
          "url": "https://inkbox-ds.vercel.app/preview/scroll-area/Preview"
        },
        {
          "name": "Horizontal",
          "url": "https://inkbox-ds.vercel.app/preview/scroll-area/Horizontal"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Scroll Area",
  "description": "A region that scrolls inside the page with a thin lilac-gray bar.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "radix-ui"
  ],
  "files": [
    {
      "path": "components/ui/scroll-area.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\n// A region that scrolls inside the page (the email list, a long event catalog) with the console's thin bar: a 6px\n// thumb in the field's lilac-gray on a clear track, darkening under the pointer.\nfunction ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" className={cn(\"relative overflow-hidden\", className)} {...props}>\n      <ScrollAreaPrimitive.Viewport data-slot=\"scroll-area-viewport\" className=\"size-full rounded-[inherit] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\">\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({ className, orientation = \"vertical\", ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\"flex touch-none p-0.5 select-none\", orientation === \"vertical\" && \"h-full w-2.5\", orientation === \"horizontal\" && \"h-2.5 flex-col\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb data-slot=\"scroll-area-thumb\" className=\"relative flex-1 rounded-pill bg-line-field transition-colors duration-150 ease-out hover:bg-line-strong motion-reduce:transition-none\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"
    }
  ]
}