{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/scroll-area/scroll-area.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"scroll-area\"\n    className={cn('relative', className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport\n      data-uipkge=\"\"\n      data-slot=\"scroll-area-viewport\"\n      className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"scroll-area-scrollbar\"\n    orientation={orientation}\n    className={cn(\n      'flex touch-none p-px transition-colors select-none',\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    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      data-uipkge=\"\"\n      data-slot=\"scroll-area-thumb\"\n      className=\"bg-border relative flex-1 rounded-full\"\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n",
      "type": "registry:ui",
      "target": "~/components/ui/scroll-area/scroll-area.tsx"
    },
    {
      "path": "packages/registry-react/components/scroll-area/index.ts",
      "content": "export { ScrollArea, ScrollBar } from './scroll-area'\n",
      "type": "registry:ui",
      "target": "~/components/ui/scroll-area/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-scroll-area"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Custom scrollbar that always renders the same way across OSes (no flashing native scrollbars on Windows). Use for sidebars, dropdown content, and any overflow region you want to feel consistent.",
  "categories": [
    "layout"
  ]
}