{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "author": "Matthew Blode",
  "description": "A scrollable container with custom styled scrollbars.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/scroll-area.tsx",
      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst ScrollBar = ({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) => (\n  <ScrollAreaPrimitive.Scrollbar\n    className={cn(\n      \"flex touch-none select-none p-px transition-colors\",\n      orientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent\",\n      orientation === \"horizontal\" && \"h-2.5 flex-col border-t border-t-transparent\",\n      className,\n    )}\n    data-slot=\"scroll-area-scrollbar\"\n    orientation={orientation}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Thumb\n      className=\"relative flex-1 rounded-full bg-border\"\n      data-slot=\"scroll-area-thumb\"\n    />\n  </ScrollAreaPrimitive.Scrollbar>\n);\n\nconst ScrollArea = ({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) => (\n  <ScrollAreaPrimitive.Root\n    className={cn(\"relative\", className)}\n    data-slot=\"scroll-area\"\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport\n      className=\"size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      data-slot=\"scroll-area-viewport\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n);\n\nexport { ScrollArea, ScrollBar };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}