diff --git a/components/s/resizable/ResizableHandle.vue b/components/s/resizable/ResizableHandle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ba8db416f5130aefeb7e8dc25d69d3ad44fbb88
--- /dev/null
+++ b/components/s/resizable/ResizableHandle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-gray-200 dark:bg-gray-800 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded bg-gray-200 dark:bg-gray-800">
+        <UIcon name="i-heroicons-ellipsis-vertical-20-solid" class="w-2.5 h-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/components/s/resizable/ResizablePanel.js b/components/s/resizable/ResizablePanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e781c837ed8294274197b26df3557ef7224c871
--- /dev/null
+++ b/components/s/resizable/ResizablePanel.js
@@ -0,0 +1,2 @@
+import { SplitterPanel } from 'radix-vue'
+export default SplitterPanel
\ No newline at end of file
diff --git a/components/s/resizable/ResizablePanelGroup.vue b/components/s/resizable/ResizablePanelGroup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c4cc62217a055a9c58aec40aa64c7335aed266e8
--- /dev/null
+++ b/components/s/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/components/scroll-area/ScrollArea.vue b/components/s/scroll-area/ScrollArea.vue
similarity index 100%
rename from components/scroll-area/ScrollArea.vue
rename to components/s/scroll-area/ScrollArea.vue
diff --git a/components/scroll-area/ScrollBar.vue b/components/s/scroll-area/ScrollBar.vue
similarity index 100%
rename from components/scroll-area/ScrollBar.vue
rename to components/s/scroll-area/ScrollBar.vue
diff --git a/pages/mdc.vue b/pages/mdc.vue
index 82915fd8d6eef48b2b07a7432d57f01c8fce1f7e..48066af68ffd2d4e0857fdc21d0d216fca883f5e 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -1,22 +1,29 @@
 <template>
-  <ScrollArea class="h-72 w-48 rounded-md border">
-    <div class="p-4">
-      <h4 class="mb-4 text-sm font-medium leading-none">
-        Tags
-      </h4>
-
-      <div v-for="tag in tags" :key="tag">
-        <div class="text-sm">
-          {{ tag }}
-        </div>
-        <UDivider class="my-2" />
+  <SResizablePanelGroup
+    id="demo-group-1"
+    direction="horizontal"
+    class="max-w-md rounded-lg border"
+  >
+    <SResizablePanel 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>
-    </div>
-  </ScrollArea>
-</template>
-
-<script setup lang="ts">
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-)
-</script>
\ No newline at end of file
+    </SResizablePanel>
+    <SResizableHandle id="demo-handle-1" />
+    <SResizablePanel id="demo-panel-2" :default-size="50">
+      <SResizablePanelGroup id="demo-group-2" direction="vertical">
+        <SResizablePanel 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>
+        </SResizablePanel>
+        <SResizableHandle id="demo-handle-2" />
+        <SResizablePanel 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>
+        </SResizablePanel>
+      </SResizablePanelGroup>
+    </SResizablePanel>
+  </SResizablePanelGroup>
+</template>
\ No newline at end of file