{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A focusable, named scroll region with theme-aware custom thumb and native scrolling behavior for long lists and documents.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/scroll-area.tsx",
      "content": "// Ballmac UI: Scroll Area. https://ui.ballmac.com/components/scroll-area\n\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as Primitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\ntype ScrollAreaProps = React.ComponentProps<typeof Primitive.Root> & {\n  /** Accessible name of the focusable reading region. */\n  label: string;\n};\nfunction ScrollArea({ className, children, label, ...props }: ScrollAreaProps) {\n  return (\n    <Primitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative overflow-hidden rounded-lg\", className)}\n      {...props}\n    >\n      <Primitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        role=\"region\"\n        aria-label={label}\n        tabIndex={0}\n        className=\"size-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/50\"\n      >\n        {children}\n      </Primitive.Viewport>\n      <ScrollBar />\n      <Primitive.Corner data-slot=\"scroll-area-corner\" className=\"bg-muted\" />\n    </Primitive.Root>\n  );\n}\ntype ScrollBarProps = React.ComponentProps<typeof Primitive.Scrollbar>;\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollBarProps) {\n  return (\n    <Primitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none select-none p-0.5 transition-colors duration-150 motion-reduce:transition-none\",\n        orientation === \"vertical\"\n          ? \"h-full w-2.5 border-s border-s-transparent\"\n          : \"h-2.5 flex-col border-t border-t-transparent\",\n        className,\n      )}\n      {...props}\n    >\n      <Primitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border hover:bg-muted-foreground/50\"\n      />\n    </Primitive.Scrollbar>\n  );\n}\nexport { ScrollArea, ScrollBar, type ScrollAreaProps, type ScrollBarProps };\n",
      "type": "registry:ui",
      "target": "@components/ballmac/scroll-area.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "scroll",
      "overflow",
      "region",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Constrains long content in an accessible keyboard-scrollable region without changing native scroll behavior.",
      "whenToUse": [
        "Activity feeds and long lists",
        "Constrained side panels"
      ],
      "whenNotToUse": [
        "Short content that can fit naturally",
        "The main page scroll"
      ],
      "composesWith": [
        "activity-feed"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Focuses the named scroll region"
        },
        {
          "keys": "Arrow keys / Page Up / Page Down",
          "action": "Scrolls the focused region"
        }
      ],
      "customization": [
        "vertical and horizontal scrollbar",
        "accessible label",
        "viewport height"
      ]
    },
    "examples": [
      "scroll-area-demo",
      "scroll-area-states"
    ],
    "url": "https://ui.ballmac.com/components/scroll-area"
  },
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}