{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/scroll-area/ScrollArea.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ScrollAreaRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport ScrollBar from './ScrollBar.vue'\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ScrollAreaRoot data-uipkge data-slot=\"scroll-area\" v-bind=\"delegatedProps\" :class=\"cn('relative', props.class)\">\n    <ScrollAreaViewport\n      data-uipkge\n      data-slot=\"scroll-area-viewport\"\n      class=\"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      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/scroll-area/ScrollArea.vue"
    },
    {
      "path": "packages/registry-vue/components/scroll-area/ScrollBar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ScrollAreaScrollbarProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {\n  orientation: 'vertical',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    data-uipkge\n    data-slot=\"scroll-area-scrollbar\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      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        props.class,\n      )\n    \"\n  >\n    <ScrollAreaThumb data-uipkge data-slot=\"scroll-area-thumb\" class=\"bg-border relative flex-1 rounded-full\" />\n  </ScrollAreaScrollbar>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/scroll-area/ScrollBar.vue"
    },
    {
      "path": "packages/registry-vue/components/scroll-area/index.ts",
      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/scroll-area/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "reka-ui"
  ],
  "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"
  ]
}