{
  "name": "ScrollAreaHorizontalDemo",
  "type": "registry:example",
  "dependencies": [],
  "registryDependencies": [
    "scroll-area"
  ],
  "files": [
    {
      "path": "example/ScrollAreaHorizontalDemo.vue",
      "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}