diff --git a/apps/www/src/lib/registry/default/example/ResizableDemo.vue b/apps/www/src/lib/registry/default/example/ResizableDemo.vue
index 375f5cf0..d9cbcca6 100644
--- a/apps/www/src/lib/registry/default/example/ResizableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ResizableDemo.vue
@@ -8,24 +8,25 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="demo-group-1"
     direction="horizontal"
     class="max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="50">
+    <ResizablePanel id="demo-panel-1" :default-size="50">
       <div class="flex h-[200px] items-center justify-center p-6">
         <span class="font-semibold">One</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel :default-size="50">
-      <ResizablePanelGroup direction="vertical">
-        <ResizablePanel :default-size="25">
+    <ResizableHandle id="demo-handle-1" />
+    <ResizablePanel id="demo-panel-2" :default-size="50">
+      <ResizablePanelGroup id="demo-group-2" direction="vertical">
+        <ResizablePanel id="demo-panel-3" :default-size="25">
           <div class="flex h-full items-center justify-center p-6">
             <span class="font-semibold">Two</span>
           </div>
         </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel :default-size="75">
+        <ResizableHandle id="demo-handle-2" />
+        <ResizablePanel id="demo-panel-4" :default-size="75">
           <div class="flex h-full items-center justify-center p-6">
             <span class="font-semibold">Three</span>
           </div>
diff --git a/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue b/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
index 9f1a9568..26d0fe39 100644
--- a/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
@@ -8,16 +8,17 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="handle-demo-group-1"
     direction="horizontal"
     class="min-h-[200px] max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="25">
+    <ResizablePanel id="handle-demo-panel-1" :default-size="25">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Sidebar</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle with-handle />
-    <ResizablePanel :default-size="75">
+    <ResizableHandle id="handle-demo-handle-1" with-handle />
+    <ResizablePanel id="handle-demo-panel-2" :default-size="75">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Content</span>
       </div>
diff --git a/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue b/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
index 5395fc8f..04a3adfb 100644
--- a/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
@@ -8,16 +8,17 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="vertical-demo-group-1"
     direction="vertical"
     class="min-h-[200px] max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="25">
+    <ResizablePanel id="vertical-demo-panel-1" :default-size="25">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Header</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel :default-size="75">
+    <ResizableHandle id="vertical-demo-handle-1" />
+    <ResizablePanel id="vertical-demo-panel-2" :default-size="75">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Content</span>
       </div>
diff --git a/apps/www/src/lib/registry/new-york/example/ResizableDemo.vue b/apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
index 520da52a..4a0782ad 100644
--- a/apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
@@ -8,24 +8,25 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="demo-group-1"
     direction="horizontal"
     class="max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="50">
+    <ResizablePanel id="demo-panel-1" :default-size="50">
       <div class="flex h-[200px] items-center justify-center p-6">
         <span class="font-semibold">One</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel :default-size="50">
-      <ResizablePanelGroup direction="vertical">
-        <ResizablePanel :default-size="25">
+    <ResizableHandle id="demo-handle-1" />
+    <ResizablePanel id="demo-panel-2" :default-size="50">
+      <ResizablePanelGroup id="demo-group-2" direction="vertical">
+        <ResizablePanel id="demo-panel-3" :default-size="25">
           <div class="flex h-full items-center justify-center p-6">
             <span class="font-semibold">Two</span>
           </div>
         </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel :default-size="75">
+        <ResizableHandle id="demo-handle-2" />
+        <ResizablePanel id="demo-panel-4" :default-size="75">
           <div class="flex h-full items-center justify-center p-6">
             <span class="font-semibold">Three</span>
           </div>
diff --git a/apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue b/apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue
index 2c554f5d..8059519d 100644
--- a/apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue
@@ -8,16 +8,17 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="handle-demo-group-1"
     direction="horizontal"
     class="min-h-[200px] max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="25">
+    <ResizablePanel id="handle-demo-panel-1" :default-size="25">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Sidebar</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle with-handle />
-    <ResizablePanel :default-size="75">
+    <ResizableHandle id="handle-demo-handle-1" with-handle />
+    <ResizablePanel id="handle-demo-panel-2" :default-size="75">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Content</span>
       </div>
diff --git a/apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue b/apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue
index b1eb7b69..ca096faa 100644
--- a/apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue
@@ -8,16 +8,17 @@ import {
 
 <template>
   <ResizablePanelGroup
+    id="vertical-demo-group-1"
     direction="vertical"
     class="min-h-[200px] max-w-md rounded-lg border"
   >
-    <ResizablePanel :default-size="25">
+    <ResizablePanel id="vertical-demo-panel-1" :default-size="25">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Header</span>
       </div>
     </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel :default-size="75">
+    <ResizableHandle id="vertical-demo-handle-1" />
+    <ResizablePanel id="vertical-demo-panel-2" :default-size="75">
       <div class="flex h-full items-center justify-center p-6">
         <span class="font-semibold">Content</span>
       </div>