diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
index ee875e5c..d687c9a0 100644
--- a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
@@ -2,20 +2,24 @@
 import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
 
 interface Artwork {
+  id: string
   artist: string
   art: string
 }
 
 const works: Artwork[] = [
   {
+    id: '1',
     artist: 'Ornella Binni',
     art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '2',
     artist: 'Tom Byrom',
     art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '3',
     artist: 'Vladimir Malyavko',
     art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
   },
@@ -30,7 +34,7 @@ const works: Artwork[] = [
           <div class="overflow-hidden rounded-md">
             <img
               :src="artwork.art"
-              :alt="`Photo by ${artwork.name}`"
+              :alt="`Photo by ${artwork.artist}`"
               class="aspect-[3/4] w-36 h-56 object-cover"
             >
           </div>
diff --git a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
index e3c9bb7f..13c8efcd 100644
--- a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
@@ -2,20 +2,24 @@
 import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
 
 interface Artwork {
+  id: string
   artist: string
   art: string
 }
 
 const works: Artwork[] = [
   {
+    id: '1',
     artist: 'Ornella Binni',
     art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '2',
     artist: 'Tom Byrom',
     art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
   },
   {
+    id: '3',
     artist: 'Vladimir Malyavko',
     art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
   },
@@ -30,7 +34,7 @@ const works: Artwork[] = [
           <div class="overflow-hidden rounded-md">
             <img
               :src="artwork.art"
-              :alt="`Photo by ${artwork.name}`"
+              :alt="`Photo by ${artwork.artist}`"
               class="aspect-[3/4] w-36 h-56 object-cover"
             >
           </div>