diff --git a/docs/content/docs/components/resizable.md b/docs/content/docs/components/resizable.md
new file mode 100644
index 000000000..83965849c
--- /dev/null
+++ b/docs/content/docs/components/resizable.md
@@ -0,0 +1,35 @@
+# Resizable
+
+Provides a flexible system for creating resizable panel layouts. Supports horizontal and vertical stacking, collapsible panels, and drag-and-drop reordering, making it easy to build complex, adjustable interfaces.
+
+
+## Basic Usage
+
+You can use the `Resizable` component directly with a `panels` prop for a config-driven approach.
+
+<ComponentPreview name='Resizable-Examples' />
+
+
+## Collapsible Panels
+
+Panels can be made collapsible when resized beyond a certain threshold.
+
+<ComponentPreview name='Resizable-Collapsible' />
+
+## Nested Layouts
+
+Resizable groups can be nested to create complex layouts.
+
+<ComponentPreview name='Resizable-NestedLayout' />
+
+## Reorderable Panels
+
+Panels can be reordered by dragging and dropping them.
+
+<ComponentPreview name='Resizable-Reorderable' />
+
+## Custom Container Slot
+
+You can provide a custom container for the resizable groups.
+
+<ComponentPreview name='Resizable-CustomContainer' />
diff --git a/src/components/Resizable/Resizable.vue b/src/components/Resizable/Resizable.vue
new file mode 100644
index 000000000..4c32d3101
--- /dev/null
+++ b/src/components/Resizable/Resizable.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="relative flex w-full h-full flex-1 flex-col overflow-hidden">
+    <div
+      class="flex w-full flex-1 flex-col"
+    >
+      <slot name="container" v-bind="slotBinding">
+        <ResizableRoot
+          v-if="hasPanels"
+          v-bind="{ ...rootProps, ...$attrs }"
+          v-on="proxyListeners"
+        >
+          <template v-for="(panel, index) in normalizedPanels" :key="panel.id">
+            <ResizablePanel v-bind="panel" :id="panel.id" :order="panel.order ?? index">
+              <slot :name="`panel-${panel.id}`" :panel="panel" />
+            </ResizablePanel>
+            <ResizableHandle
+              v-if="index < normalizedPanels.length - 1"
+              :index="index"
+            />
+          </template>
+        </ResizableRoot>
+        <ResizableRoot
+          v-else
+          v-bind="{ ...rootProps, ...$attrs }"
+          v-on="proxyListeners"
+        >
+          <slot />
+        </ResizableRoot>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, useSlots, useAttrs } from 'vue'
+import ResizableRoot from './ResizableRoot.vue'
+import ResizablePanel from './ResizablePanel.vue'
+import ResizableHandle from './ResizableHandle.vue'
+import { RESIZABLE_PROVIDER_KEY } from './utils'
+import type {
+  ResizableRootProps,
+  ResizableRootEmits,
+  ResizablePanelConfig,
+} from './types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<ResizableRootProps & { panels?: ResizablePanelConfig[] }>(),
+  {
+    direction: 'horizontal',
+    panels: () => [],
+  }
+)
+
+const emit = defineEmits<ResizableRootEmits>()
+
+const normalizedPanels = computed(() =>
+  (props.panels || []).map((panel, index) => ({
+    id: panel.id || `${index}`,
+    order: panel.order ?? index,
+    ...panel,
+  }))
+)
+
+const hasPanels = computed(() => normalizedPanels.value.length > 0)
+
+const rootProps = computed(() => {
+  const { panels, ...rest } = props
+  return rest
+})
+
+const proxyListeners = {
+  'update:modelValue': (val: number[]) => emit('update:modelValue', val),
+  resizeStart: (val: { index: number }) => emit('resizeStart', val),
+  resize: (val: { sizes: number[] }) => emit('resize', val),
+  resizeEnd: (val: { sizes: number[] }) => emit('resizeEnd', val),
+}
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const slotBinding = computed(() => ({
+  hasPanels: hasPanels.value,
+  panels: normalizedPanels.value,
+  rootProps: rootProps.value,
+  listeners: proxyListeners,
+  slots,
+  attrs,
+}))
+
+provide(RESIZABLE_PROVIDER_KEY, slotBinding)
+
+defineExpose({
+  panels: normalizedPanels,
+  hasPanels,
+})
+</script>
diff --git a/src/components/Resizable/ResizableHandle.vue b/src/components/Resizable/ResizableHandle.vue
new file mode 100644
index 000000000..0011fcdba
--- /dev/null
+++ b/src/components/Resizable/ResizableHandle.vue
@@ -0,0 +1,337 @@
+<template>
+  <component
+    :is="as"
+    ref="handleRef"
+    :class="handleClasses"
+    :style="handleStyle"
+    v-bind="$attrs"
+    :data-disabled="isDisabled"
+    :aria-label="ariaLabel || `Resize handle ${index}`"
+    :aria-orientation="context.direction === 'horizontal' ? 'vertical' : 'horizontal'"
+    role="separator"
+    tabindex="0"
+    @keydown="handleKeyDown"
+  >
+    <slot>
+      <div 
+        :class="handleBarClasses"
+        @mousedown.stop.prevent="handleMouseDown"
+        @touchstart.stop.prevent="handleTouchStart"
+      >
+        <div v-if="withHandle" class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-gray-50 group-hover:bg-gray-100">
+           <svg v-if="context.direction === 'vertical'" width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5"><path d="M5.5 4.625C5.5 5.10825 5.10825 5.5 4.625 5.5C4.14175 5.5 3.75 5.10825 3.75 4.625C3.75 4.14175 4.14175 3.75 4.625 3.75C5.10825 3.75 5.5 4.14175 5.5 4.625ZM9.5 4.625C9.5 5.10825 9.10825 5.5 8.625 5.5C8.14175 5.5 7.75 5.10825 7.75 4.625C7.75 4.14175 8.14175 3.75 8.625 3.75C9.10825 3.75 9.5 4.14175 9.5 4.625ZM10.375 11.25C10.8582 11.25 11.25 10.8582 11.25 10.375C11.25 9.89175 10.8582 9.5 10.375 9.5C9.89175 9.5 9.5 9.89175 9.5 10.375C9.5 10.8582 9.89175 11.25 10.375 11.25ZM6.375 11.25C6.85825 11.25 7.25 10.8582 7.25 10.375C7.25 9.89175 6.85825 9.5 6.375 9.5C5.89175 9.5 5.5 9.89175 5.5 10.375C5.5 10.8582 5.89175 11.25 6.375 11.25Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+           <svg v-else width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5"><path d="M5.5 4.625C5.5 5.10825 5.10825 5.5 4.625 5.5C4.14175 5.5 3.75 5.10825 3.75 4.625C3.75 4.14175 4.14175 3.75 4.625 3.75C5.10825 3.75 5.5 4.14175 5.5 4.625ZM9.5 4.625C9.5 5.10825 9.10825 5.5 8.625 5.5C8.14175 5.5 7.75 5.10825 7.75 4.625C7.75 4.14175 8.14175 3.75 8.625 3.75C9.10825 3.75 9.5 4.14175 9.5 4.625ZM10.375 11.25C10.8582 11.25 11.25 10.8582 11.25 10.375C11.25 9.89175 10.8582 9.5 10.375 9.5C9.89175 9.5 9.5 9.89175 9.5 10.375C9.5 10.8582 9.89175 11.25 10.375 11.25ZM6.375 11.25C6.85825 11.25 7.25 10.8582 7.25 10.375C7.25 9.89175 6.85825 9.5 6.375 9.5C5.89175 9.5 5.5 9.89175 5.5 10.375C5.5 10.8582 5.89175 11.25 6.375 11.25Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" transform="rotate(90 7.5 7.5)"></path></svg>
+        </div>
+      </div>
+    </slot>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, onUnmounted } from 'vue'
+import type { ResizableHandleProps } from './types'
+import { RESIZABLE_CONTEXT_KEY } from './utils'
+
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<ResizableHandleProps>(), {
+  as: 'div',
+  disabled: false,
+  hitArea: 6,
+  cursor: undefined,
+  ariaLabel: undefined,
+  keyboardStep: 5,
+  withHandle: false,
+})
+
+const context = inject(RESIZABLE_CONTEXT_KEY)
+if (!context) {
+  throw new Error('ResizableHandle must be used within ResizableRoot')
+}
+
+const handleRef = ref<HTMLElement>()
+const isDragging = ref(false)
+const startPos = ref(0)
+const startSizes = ref<number[]>([])
+
+// Computed
+const isDisabled = computed(() => props.disabled || context.disabled)
+
+const handleClasses = computed(() => [
+  'resizable-handle',
+  {
+    'horizontal': context.direction === 'horizontal',
+    'vertical': context.direction === 'vertical',
+    'disabled': isDisabled.value,
+    'dragging': isDragging.value,
+  }
+])
+
+const handleStyle = computed(() => {
+  const cursorMap = {
+    horizontal: 'col-resize',
+    vertical: 'row-resize',
+  }
+  
+  return {
+    cursor: props.cursor || (isDisabled.value ? 'not-allowed' : cursorMap[context.direction]),
+    touchAction: 'none',
+    userSelect: 'none',
+  }
+})
+
+const handleBarClasses = computed(() => [
+  'resizable-handle-bar',
+  {
+    'horizontal': context.direction === 'horizontal',
+    'vertical': context.direction === 'vertical',
+  }
+])
+
+// Mouse handlers
+const handleMouseDown = (e: MouseEvent) => {
+  if (isDisabled.value) return
+  
+  e.preventDefault()
+  e.stopPropagation()
+  
+  isDragging.value = true
+  startPos.value = context.direction === 'horizontal' ? e.clientX : e.clientY
+  
+  if (props.index !== undefined) {
+    context.startResize(props.index)
+  }
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  document.body.style.cursor = handleStyle.value.cursor as string
+  document.body.style.userSelect = 'none'
+}
+
+const handleMouseMove = (e: MouseEvent) => {
+  if (!isDragging.value) return
+  
+  e.preventDefault()
+  
+  const currentPos = context.direction === 'horizontal' ? e.clientX : e.clientY
+  const delta = currentPos - startPos.value
+  
+  // Convert pixel delta to percentage
+  const containerSize = context.direction === 'horizontal' 
+    ? handleRef.value?.parentElement?.offsetWidth || 1
+    : handleRef.value?.parentElement?.offsetHeight || 1
+  
+  const percentDelta = (delta / containerSize) * 100
+  
+  context.resize(percentDelta)
+  startPos.value = currentPos
+}
+
+const handleMouseUp = () => {
+  if (!isDragging.value) return
+  
+  isDragging.value = false
+  context.endResize()
+  
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
+
+// Touch handlers
+const handleTouchStart = (e: TouchEvent) => {
+  if (isDisabled.value) return
+  
+  e.preventDefault()
+  
+  const touch = e.touches[0]
+  isDragging.value = true
+  startPos.value = context.direction === 'horizontal' ? touch.clientX : touch.clientY
+  
+  if (props.index !== undefined) {
+    context.startResize(props.index)
+  }
+  
+  document.addEventListener('touchmove', handleTouchMove, { passive: false })
+  document.addEventListener('touchend', handleTouchEnd)
+}
+
+const handleTouchMove = (e: TouchEvent) => {
+  if (!isDragging.value) return
+  
+  e.preventDefault()
+  
+  const touch = e.touches[0]
+  const currentPos = context.direction === 'horizontal' ? touch.clientX : touch.clientY
+  const delta = currentPos - startPos.value
+  
+  const containerSize = context.direction === 'horizontal' 
+    ? handleRef.value?.parentElement?.offsetWidth || 1
+    : handleRef.value?.parentElement?.offsetHeight || 1
+  
+  const percentDelta = (delta / containerSize) * 100
+  
+  context.resize(percentDelta)
+  startPos.value = currentPos
+}
+
+const handleTouchEnd = () => {
+  if (!isDragging.value) return
+  
+  isDragging.value = false
+  context.endResize()
+  
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+}
+
+// Keyboard handler
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (isDisabled.value || props.index === undefined) return
+  
+  const isHorizontal = context.direction === 'horizontal'
+  const step = props.keyboardStep
+  
+  let delta = 0
+  
+  if ((isHorizontal && e.key === 'ArrowLeft') || (!isHorizontal && e.key === 'ArrowUp')) {
+    delta = -step
+  } else if ((isHorizontal && e.key === 'ArrowRight') || (!isHorizontal && e.key === 'ArrowDown')) {
+    delta = step
+  } else if (e.key === 'Home') {
+    delta = -100
+  } else if (e.key === 'End') {
+    delta = 100
+  } else {
+    return
+  }
+  
+  e.preventDefault()
+  
+  context.startResize(props.index)
+  context.resize(delta)
+  context.endResize()
+}
+
+// Cleanup
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+})
+
+defineExpose({ handleRef, isDragging })
+</script>
+
+<style scoped>
+.resizable-handle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  z-index: 100; /* Increased z-index */
+  outline: none;
+  background-color: transparent;
+  overflow: visible;
+  touch-action: none;
+}
+
+/* Negative margin trick: Element has 1px size (for event capture) but takes 0px layout space */
+.resizable-handle.horizontal {
+  width: 1px;
+  margin-right: -1px;
+  height: 100%;
+  cursor: col-resize;
+  border: none;
+  background-color: transparent;
+}
+
+.resizable-handle.vertical {
+  width: 100%;
+  height: 1px;
+  margin-bottom: -1px;
+  cursor: row-resize;
+  border: none;
+  background-color: transparent;
+}
+
+/* HIT AREA */
+.resizable-handle-bar {
+  position: absolute;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  background-color: transparent;
+  touch-action: none;
+}
+
+.resizable-handle-bar.horizontal {
+  top: 0;
+  bottom: 0;
+  left: -5px; /* Center 1px handle in 11px area (-5 to +5 is 10, +1px width = 11) */
+  width: 11px;
+  cursor: col-resize;
+}
+
+.resizable-handle-bar.vertical {
+  left: 0;
+  right: 0;
+  top: -5px;
+  height: 11px;
+  cursor: row-resize;
+}
+
+/* VISUAL INDICATOR */
+.resizable-handle-bar::after {
+  content: '';
+  position: absolute;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+  pointer-events: none;
+}
+
+.resizable-handle-bar.horizontal::after {
+  width: 1px;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.resizable-handle-bar.vertical::after {
+  height: 1px;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Hover & Drag States */
+.resizable-handle:hover .resizable-handle-bar::after {
+  background-color: #93c5fd;
+}
+
+.resizable-handle.dragging .resizable-handle-bar::after {
+  background-color: #60a5fa;
+}
+
+/* Specific hover on the bar itself to ensure consistency */
+.resizable-handle-bar:hover::after {
+  background-color: #93c5fd;
+}
+
+.resizable-handle.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.resizable-handle:focus-visible .resizable-handle-bar::after {
+  background-color: #3b82f6;
+  transform: scale(1.5); 
+}
+</style>
diff --git a/src/components/Resizable/ResizablePanel.vue b/src/components/Resizable/ResizablePanel.vue
new file mode 100644
index 000000000..7f1d6883d
--- /dev/null
+++ b/src/components/Resizable/ResizablePanel.vue
@@ -0,0 +1,159 @@
+<template>
+  <component
+    :is="as"
+    ref="panelRef"
+    :class="panelClasses"
+    :style="panelStyle"
+    v-bind="$attrs"
+    :data-panel-id="panelId"
+    :data-collapsed="isCollapsed"
+    :data-panel-index="panelIndexFromProvider"
+    :aria-label="panelLabel"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import type { ResizablePanelProps, ResizablePanelEmits, PanelData } from './types'
+import { RESIZABLE_CONTEXT_KEY, RESIZABLE_PROVIDER_KEY } from './utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<ResizablePanelProps>(), {
+  as: 'div',
+  minSize: 10,
+  maxSize: 100,
+  defaultSize: undefined,
+  collapsible: false,
+  collapsedSize: 0,
+  order: 0,
+  grow: false,
+  resizable: true,
+})
+
+const emit = defineEmits<ResizablePanelEmits>()
+
+const context = inject(RESIZABLE_CONTEXT_KEY)
+if (!context) {
+  throw new Error('ResizablePanel must be used within ResizableRoot')
+}
+
+const provider = inject(RESIZABLE_PROVIDER_KEY, null)
+
+const panelRef = ref<HTMLElement>()
+const panelId = ref(props.id || `panel-${Math.random().toString(36).substr(2, 9)}`)
+const wasCollapsed = ref(false)
+
+const providerPanel = computed(() => {
+  if (!provider?.value) return null
+  return provider.value.panels.find(panel => panel.id === panelId.value) || null
+})
+
+const panelIndexFromProvider = computed(() => {
+  if (!provider?.value) return -1
+  return provider.value.panels.findIndex(panel => panel.id === panelId.value)
+})
+
+const panelLabel = computed(() => {
+  return providerPanel.value?.label || props.label || panelId.value
+})
+
+// Computed
+const currentSize = computed(() => context.getPanelSize(panelId.value))
+
+const isCollapsed = computed(() => {
+  return props.collapsible && currentSize.value <= props.collapsedSize
+})
+
+const panelClasses = computed(() => [
+  'resizable-panel',
+  {
+    'transition-all duration-200': isCollapsed.value !== wasCollapsed.value,
+  }
+])
+
+const panelStyle = computed(() => {
+  const size = currentSize.value
+  
+  const isHorizontal = context.direction === 'horizontal'
+  
+  return {
+    [isHorizontal ? 'width' : 'height']: `${size}%`,
+    [isHorizontal ? 'height' : 'width']: '100%',
+    flexShrink: 0,
+    flexGrow: props.grow ? 1 : 0,
+    overflow: 'hidden',
+  }
+})
+
+// Watch for collapse/expand
+watch(isCollapsed, (collapsed, wasCollapsedBefore) => {
+  if (collapsed && !wasCollapsedBefore) {
+    emit('collapse')
+  } else if (!collapsed && wasCollapsedBefore) {
+    emit('expand')
+  }
+  wasCollapsed.value = collapsed
+})
+
+// Lifecycle
+onMounted(() => {
+  const panelData: PanelData = {
+    id: panelId.value,
+    size: currentSize.value || props.defaultSize || 0,
+    minSize: props.minSize,
+    maxSize: props.maxSize,
+    collapsible: props.collapsible,
+    collapsedSize: props.collapsedSize,
+    order: props.order,
+    grow: props.grow,
+    resizable: props.resizable,
+    element: panelRef.value,   
+    defaultSize: props.defaultSize, 
+  }
+  
+  context.registerPanel(panelId.value, panelData)
+})
+
+watch(() => [
+  props.minSize, 
+  props.maxSize, 
+  props.collapsible, 
+  props.collapsedSize, 
+  props.order, 
+  props.grow, 
+  props.resizable
+], () => {
+  const panelData: PanelData = {
+    id: panelId.value,
+    size: currentSize.value || props.defaultSize || 0,
+    minSize: props.minSize,
+    maxSize: props.maxSize,
+    collapsible: props.collapsible,
+    collapsedSize: props.collapsedSize,
+    order: props.order,
+    grow: props.grow,
+    resizable: props.resizable,
+    element: panelRef.value,
+    // @ts-ignore
+    defaultSize: props.defaultSize, 
+  }
+  context.registerPanel(panelId.value, panelData)
+})
+
+onUnmounted(() => {
+  context.unregisterPanel(panelId.value)
+})
+
+defineExpose({ panelRef, panelId, currentSize, isCollapsed })
+</script>
+
+<style scoped>
+.resizable-panel {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+}
+</style>
diff --git a/src/components/Resizable/ResizableRoot.vue b/src/components/Resizable/ResizableRoot.vue
new file mode 100644
index 000000000..89c25a144
--- /dev/null
+++ b/src/components/Resizable/ResizableRoot.vue
@@ -0,0 +1,229 @@
+<template>
+  <component
+    :is="as"
+    ref="rootRef"
+    :class="rootClasses"
+    v-bind="$attrs"
+    :data-direction="direction"
+    :data-disabled="disabled"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, ref, watch, onMounted, reactive } from 'vue'
+import type { ResizableRootProps, ResizableRootEmits, PanelData, ResizableContext } from './types'
+import { RESIZABLE_CONTEXT_KEY, adjustSizes, distributeSizes } from './utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<ResizableRootProps>(), {
+  direction: 'horizontal',
+  as: 'div',
+  disabled: false,
+  reverse: false,
+  rtl: false,
+})
+
+const emit = defineEmits<ResizableRootEmits>()
+
+const rootRef = ref<HTMLElement>()
+const panels = reactive(new Map<string, PanelData>())
+const panelSizes = ref<number[]>([])
+const isResizing = ref(false)
+const activeHandleIndex = ref<number>(-1)
+const startPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 })
+
+// Computed classes
+const rootClasses = computed(() => [
+  'resizable-root',
+  'flex',
+  {
+    'flex-row': props.direction === 'horizontal',
+    'flex-col': props.direction === 'vertical',
+    'cursor-not-allowed': props.disabled,
+  }
+])
+
+
+
+
+// Initialize sizes
+const initializeSizes = () => {
+  const panelArray = Array.from(panels.values()).sort((a, b) => a.order - b.order)
+  
+  if (panelArray.length === 0) return
+  
+  let initialSizes: number[] | undefined
+  let source = 'auto'
+  
+  // Try modelValue first
+
+  // If no storage, try modelValue
+  if (!initialSizes && props.modelValue && props.modelValue.length === panelArray.length) {
+    initialSizes = props.modelValue
+    source = 'model'
+  }
+  
+  // If no modelValue, try defaultValue
+  if (!initialSizes && props.defaultValue && props.defaultValue.length === panelArray.length) {
+    initialSizes = props.defaultValue
+    source = 'default'
+  }
+  
+  if (!initialSizes) {
+    // Auto-distribute
+    initialSizes = distributeSizes(100, panelArray)
+    source = 'distribute'
+  }
+  
+  // Apply constraints
+  panelSizes.value = initialSizes.map((size, i) => {
+    const panel = panelArray[i]
+    if (panel.collapsible && size < panel.minSize) {
+      return size
+    }
+    return Math.max(panel.minSize, Math.min(panel.maxSize, size))
+  })
+  
+  // Normalize to 100%
+  const total = panelSizes.value.reduce((sum, size) => sum + size, 0)
+  if (total > 0 && Math.abs(total - 100) > 0.01) {
+    panelSizes.value = panelSizes.value.map(size => (size / total) * 100)
+  }
+
+  // If we restored from storage or defaults but have a modelValue binding,
+  // we need to sync the parent to our resolved state.
+  if (source !== 'model' && props.modelValue !== undefined) {
+      if (panelArray.length === props.modelValue.length) {
+          emit('update:modelValue', panelSizes.value)
+      }
+  }
+}
+
+// Register panel
+const registerPanel = (id: string, data: PanelData) => {
+  panels.set(id, data)
+  initializeSizes()
+}
+
+// Unregister panel
+const unregisterPanel = (id: string) => {
+  panels.delete(id)
+  initializeSizes()
+}
+
+// Update panel size
+const updatePanelSize = (id: string, size: number) => {
+  const panel = panels.get(id)
+  if (panel) {
+    panel.size = size
+  }
+}
+
+// Get panel size
+const getPanelSize = (id: string): number => {
+  const panelArray = Array.from(panels.values()).sort((a, b) => a.order - b.order)
+  const index = panelArray.findIndex(p => p.id === id)
+  return index >= 0 ? panelSizes.value[index] || 0 : 0
+}
+
+// Start resize
+const startResize = (index: number) => {
+  if (props.disabled) return
+  
+  isResizing.value = true
+  activeHandleIndex.value = index
+  emit('resizeStart', { index })
+}
+
+// Resize
+const resize = (delta: number) => {
+  if (!isResizing.value || activeHandleIndex.value < 0) return
+  
+  const panelArray = Array.from(panels.values()).sort((a, b) => a.order - b.order)
+  
+  // Adjust delta based on direction and reverse
+  let adjustedDelta = delta
+  if (props.reverse) adjustedDelta = -adjustedDelta
+  if (props.rtl && props.direction === 'horizontal') adjustedDelta = -adjustedDelta
+  
+  const newSizes = adjustSizes(
+    panelSizes.value,
+    activeHandleIndex.value,
+    adjustedDelta,
+    panelArray
+  )
+  
+  panelSizes.value = newSizes
+  emit('resize', { sizes: newSizes })
+  
+  // Update model value
+  if (props.modelValue !== undefined) {
+    emit('update:modelValue', newSizes)
+  }
+}
+
+// End resize
+const endResize = () => {
+  if (!isResizing.value) return
+  
+  isResizing.value = false
+  emit('resizeEnd', { sizes: panelSizes.value })
+  
+
+  
+  activeHandleIndex.value = -1
+}
+
+// Provide context with reactive properties
+provide(RESIZABLE_CONTEXT_KEY, {
+  get direction() { return props.direction },
+  get disabled() { return props.disabled },
+  get reverse() { return props.reverse },
+  get rtl() { return props.rtl },
+  panels,
+  registerPanel,
+  unregisterPanel,
+  updatePanelSize,
+  getPanelSize,
+  startResize,
+  resize,
+  endResize,
+  get isResizing() { return isResizing.value },
+})
+
+// Watch for controlled mode changes
+watch(() => props.modelValue, (newValue) => {
+  // Only update if the new value is significantly different to avoid loops
+  // and only if we have panels
+  if (newValue && newValue.length === panels.size && panels.size > 0) {
+     // Check if values are actually different to avoid overwriting internal state unnecessarily
+     const isDifferent = newValue.some((v, i) => Math.abs(v - panelSizes.value[i]) > 0.01)
+     if (isDifferent) {
+         panelSizes.value = newValue
+     }
+  }
+}, { deep: true })
+
+// Watch for panel changes
+watch(() => panels.size, () => {
+  initializeSizes()
+})
+
+onMounted(() => {
+  // Logic moved to initializeSizes which is called by registerPanel
+  // but we can ensure it runs one final time if needed, though usually watcher handles it.
+})
+
+defineExpose({ rootRef, panelSizes })
+</script>
+
+<style scoped>
+.resizable-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Resizable/index.ts b/src/components/Resizable/index.ts
new file mode 100644
index 000000000..8420783bc
--- /dev/null
+++ b/src/components/Resizable/index.ts
@@ -0,0 +1,15 @@
+export { default as Resizable } from './Resizable.vue'
+export { default as ResizableRoot } from './ResizableRoot.vue'
+export { default as ResizablePanel } from './ResizablePanel.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+
+export type {
+    ResizableRootProps,
+    ResizableRootEmits,
+    ResizablePanelProps,
+    ResizablePanelEmits,
+    ResizableHandleProps,
+    ResizableDirection,
+    PanelData,
+    ResizableContext,
+} from './types'
diff --git a/src/components/Resizable/stories/Collapsible.vue b/src/components/Resizable/stories/Collapsible.vue
new file mode 100644
index 000000000..c6443190d
--- /dev/null
+++ b/src/components/Resizable/stories/Collapsible.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+import { Resizable, Button, FeatherIcon } from 'frappe-ui'
+
+const collapsibleSizes = useStorage('collapsible-demo-v2', [25, 50, 25])
+const panels = ref([
+  { id: 'nav', minSize: 15, maxSize: 30, collapsible: true, collapsedSize: 5 },
+  { id: 'main', minSize: 30 },
+  { id: 'aside', minSize: 15, maxSize: 30, collapsible: true, collapsedSize: 0 }
+])
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="h-[500px] border rounded-lg overflow-hidden">
+      <Resizable
+        v-model="collapsibleSizes"
+        direction="horizontal"
+        :panels="panels"
+      >
+        <template #panel-nav>
+          <div class="flex-1 w-full bg-indigo-50 border-r border-indigo-100 flex flex-col items-center justify-center p-2 text-center transition-all overflow-hidden relative">
+            <div v-if="collapsibleSizes[0] <= panels[0].collapsedSize" class="absolute inset-0 flex items-center justify-center bg-indigo-100 cursor-pointer" title="Expand">
+              <FeatherIcon name="menu" class="w-4 h-4 text-indigo-600" />
+            </div>
+            <template v-else>
+              <FeatherIcon name="sidebar" class="w-6 h-6 text-indigo-600 mb-2" />
+              <span class="font-bold text-indigo-900">Navigation</span>
+              <span class="text-xs text-indigo-700 mt-1">{{ collapsibleSizes[0]?.toFixed(1) }}%</span>
+              <div v-if="collapsibleSizes[0] > 15" class="mt-4 space-y-2 w-full px-2">
+                <div class="p-2 bg-indigo-100 rounded text-xs">Dashboard</div>
+                <div class="p-2 bg-indigo-100 rounded text-xs">Projects</div>
+                <div class="p-2 bg-indigo-100 rounded text-xs">Settings</div>
+              </div>
+            </template>
+          </div>
+        </template>
+        
+        <template #panel-main>
+          <div class="flex-1 w-full bg-white flex flex-col items-center justify-center p-4">
+            <h3 class="font-bold text-gray-900 text-lg">Main Content Area</h3>
+            <p class="text-sm text-gray-500 mt-2">This panel cannot collapse</p>
+            <p class="text-xs text-gray-400 mt-2">{{ collapsibleSizes[1]?.toFixed(1) }}%</p>
+          </div>
+        </template>
+
+        <template #panel-aside>
+          <div class="flex-1 w-full bg-amber-50 border-l border-amber-100 flex flex-col items-center justify-center p-2 text-center transition-all overflow-hidden relative">
+            <div v-if="collapsibleSizes[2] <= panels[2].collapsedSize" class="absolute inset-0 flex items-center justify-center bg-amber-100 cursor-pointer" title="Expand">
+              <FeatherIcon name="help-circle" class="w-4 h-4 text-amber-600" />
+            </div>
+            <template v-else>
+              <FeatherIcon name="info" class="w-6 h-6 text-amber-600 mb-2" />
+              <span class="font-bold text-amber-900">Info Panel</span>
+              <span class="text-xs text-amber-700 mt-1">{{ collapsibleSizes[2]?.toFixed(1) }}%</span>
+              <div v-if="collapsibleSizes[2] > 15" class="mt-4 text-xs text-amber-800">
+                <p>Additional information and details appear here when the panel is expanded.</p>
+              </div>
+            </template>
+          </div>
+        </template>
+      </Resizable>
+    </div>
+
+  
+  </div>
+</template>
diff --git a/src/components/Resizable/stories/CustomContainer.vue b/src/components/Resizable/stories/CustomContainer.vue
new file mode 100644
index 000000000..30642c147
--- /dev/null
+++ b/src/components/Resizable/stories/CustomContainer.vue
@@ -0,0 +1,252 @@
+<script setup>
+import { useStorage } from '@vueuse/core'
+import { Resizable, FeatherIcon, Button, TextInput } from 'frappe-ui'
+
+const horizontalSizes = useStorage('vscode-layout-h', [15, 65, 20])
+const verticalSizes = useStorage('vscode-vertical-auto', [70, 30])
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="h-[800px] border rounded-lg overflow-hidden bg-[#1e1e1e]">
+
+      <Resizable
+        v-model="horizontalSizes"
+        direction="horizontal"
+        :panels="[
+          { id: 'sidebar', minSize: 0, maxSize: 25, defaultSize: 15, collapsible: true, collapsedSize: 0 },
+          { id: 'main', minSize: 40 },
+          { id: 'chat', minSize: 0, maxSize: 30, defaultSize: 20, collapsible: true, collapsedSize: 0 }
+        ]"
+      >
+        <template #panel-sidebar>
+          <div class="h-full w-full bg-[#252526] border-r border-[#2d2d2d] flex flex-row">
+            <div class="w-12 bg-[#333333] border-r border-[#2d2d2d] flex flex-col items-center py-3 gap-4">
+              <div class="w-8 h-8 flex items-center justify-center text-white hover:bg-[#2a2a2a] rounded cursor-pointer">
+                <FeatherIcon name="file-text" class="w-5 h-5" />
+              </div>
+              <div class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-[#2a2a2a] rounded cursor-pointer">
+                <FeatherIcon name="search" class="w-5 h-5" />
+              </div>
+              <div class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-[#2a2a2a] rounded cursor-pointer">
+                <FeatherIcon name="git-branch" class="w-5 h-5" />
+              </div>
+              <div class="w-8 h-8 flex items-center justify-center text-gray-400 hover:bg-[#2a2a2a] rounded cursor-pointer">
+                <FeatherIcon name="package" class="w-5 h-5" />
+              </div>
+            </div>
+
+            <div class="flex-1 flex flex-col">
+              <div class="px-4 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                Explorer
+              </div>
+              <div class="flex-1 overflow-auto px-2">
+                <div class="space-y-1 text-sm">
+                  <div class="flex items-center gap-2 px-2 py-1 text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                    <FeatherIcon name="folder" class="w-4 h-4 text-blue-400" />
+                    <span>src</span>
+                  </div>
+                  <div class="ml-6 space-y-1">
+                    <div class="flex items-center gap-2 px-2 py-1 text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                      <FeatherIcon name="folder" class="w-4 h-4 text-blue-400" />
+                      <span>components</span>
+                    </div>
+                    <div class="ml-6 space-y-1">
+                      <div class="flex items-center gap-2 px-2 py-1 text-gray-300 bg-[#37373d] rounded cursor-pointer">
+                        <FeatherIcon name="file" class="w-4 h-4 text-green-400" />
+                        <span>Resizable.vue</span>
+                      </div>
+                      <div class="flex items-center gap-2 px-2 py-1 text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                        <FeatherIcon name="file" class="w-4 h-4 text-blue-400" />
+                        <span>index.ts</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-2 px-2 py-1 text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                    <FeatherIcon name="file" class="w-4 h-4 text-orange-400" />
+                    <span>package.json</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template #panel-main>
+          <div class="h-full w-full">
+            <Resizable
+              v-model="verticalSizes"
+              direction="vertical"
+              :panels="[
+                { id: 'editor', minSize: 30, defaultSize: 70 },
+                { id: 'terminal', minSize: 20, maxSize: 80, defaultSize: 20, collapsible: true, collapsedSize: 0 }
+              ]"
+            >
+              <template #panel-editor>
+                <div class="h-full w-full bg-[#1e1e1e] flex flex-col">
+                  <div class="bg-[#252526] border-b border-[#2d2d2d] flex items-center">
+                    <div class="flex items-center gap-2 px-4 py-2 bg-[#1e1e1e] border-r border-[#2d2d2d] text-sm text-gray-300">
+                      <FeatherIcon name="file" class="w-4 h-4 text-green-400" />
+                      <span>Resizable.vue</span>
+                      <FeatherIcon name="x" class="w-3 h-3 text-gray-500 hover:text-gray-300 cursor-pointer ml-2" />
+                    </div>
+                  </div>
+
+                  <div class="flex-1 overflow-auto p-4 font-mono text-sm">
+                    <div class="space-y-0 text-[#d4d4d4]">
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">1</span>
+                        <span><span class="text-[#569cd6]">&lt;template&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">2</span>
+                        <span class="ml-4"><span class="text-[#569cd6]">&lt;div</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"resizable-root"</span><span class="text-[#569cd6]">&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">3</span>
+                        <span class="ml-8"><span class="text-[#6a9955]">&lt;!-- Resizable panels --&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">4</span>
+                        <span class="ml-8"><span class="text-[#569cd6]">&lt;slot</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"default"</span> <span class="text-[#569cd6]">/&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">5</span>
+                        <span class="ml-4"><span class="text-[#569cd6]">&lt;/div&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">6</span>
+                        <span><span class="text-[#569cd6]">&lt;/template&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">7</span>
+                        <span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">8</span>
+                        <span><span class="text-[#569cd6]">&lt;script</span> <span class="text-[#9cdcfe]">setup</span><span class="text-[#569cd6]">&gt;</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">9</span>
+                        <span><span class="text-[#c586c0]">import</span> { <span class="text-[#9cdcfe]">ref</span> } <span class="text-[#c586c0]">from</span> <span class="text-[#ce9178]">'vue'</span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">10</span>
+                        <span></span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">11</span>
+                        <span><span class="text-[#c586c0]">const</span> <span class="text-[#4fc1ff]">sizes</span> = <span class="text-[#dcdcaa]">ref</span>([<span class="text-[#b5cea8]">50</span>, <span class="text-[#b5cea8]">50</span>])</span>
+                      </div>
+                      <div class="flex">
+                        <span class="w-12 text-right pr-4 text-gray-600 select-none">12</span>
+                        <span><span class="text-[#569cd6]">&lt;/script&gt;</span></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <template #panel-terminal>
+                <div class="h-full w-full bg-[#1e1e1e] flex flex-col border-t border-[#2d2d2d]">
+                  <div class="bg-[#252526] px-4 py-2 flex items-center justify-between border-b border-[#2d2d2d]">
+                    <div class="flex items-center gap-3">
+                      <span class="text-xs font-semibold text-gray-300 uppercase tracking-wider">Terminal</span>
+                      <div class="flex items-center gap-2">
+                        <div class="px-2 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400">bash</div>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <FeatherIcon name="plus" class="w-4 h-4 text-gray-400 hover:text-gray-300 cursor-pointer" />
+                      <FeatherIcon name="trash-2" class="w-4 h-4 text-gray-400 hover:text-gray-300 cursor-pointer" />
+                    </div>
+                  </div>
+
+                  <div class="flex-1 overflow-auto p-3 font-mono text-sm text-gray-300">
+                    <div class="space-y-1">
+                      <div><span class="text-green-400">user@machine</span>:<span class="text-blue-400">~/project</span>$ npm run dev</div>
+                      <div class="text-gray-500">
+                        <div>  VITE v5.0.0  ready in 234 ms</div>
+                        <div></div>
+                        <div>  ➜  <span class="text-cyan-400">Local</span>:   http://localhost:5173/</div>
+                        <div>  ➜  <span class="text-gray-600">Network</span>: use --host to expose</div>
+                      </div>
+                      <div class="mt-2"><span class="text-green-400">user@machine</span>:<span class="text-blue-400">~/project</span>$ <span class="animate-pulse">█</span></div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </Resizable>
+          </div>
+        </template>
+
+        <template #panel-chat>
+          <div class="h-full w-full bg-[#252526] border-l border-[#2d2d2d] flex flex-col">
+            <div class="px-4 py-3 border-b border-[#2d2d2d] flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <FeatherIcon name="message-circle" class="w-4 h-4 text-blue-400" />
+                <span class="text-sm font-semibold text-gray-300">Chat</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <FeatherIcon name="more-vertical" class="w-4 h-4 text-gray-400 hover:text-gray-300 cursor-pointer" />
+              </div>
+            </div>
+
+            <div class="flex-1 min-h-0 overflow-y-auto p-4 space-y-4">
+              <div class="flex gap-3">
+                <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
+                  AI
+                </div>
+                <div class="flex-1">
+                  <div class="flex items-baseline gap-2 mb-1">
+                    <span class="text-sm font-semibold text-gray-300">AI Assistant</span>
+                    <span class="text-xs text-gray-500">10:30 AM</span>
+                  </div>
+                  <div class="text-sm text-gray-400 bg-[#2d2d2d] rounded-lg p-3">
+                    Hello! I can help you with your code. What would you like to work on?
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex gap-3">
+                <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
+                  U
+                </div>
+                <div class="flex-1">
+                  <div class="flex items-baseline gap-2 mb-1">
+                    <span class="text-sm font-semibold text-gray-300">You</span>
+                    <span class="text-xs text-gray-500">10:31 AM</span>
+                  </div>
+                  <div class="text-sm text-gray-400 bg-[#1e1e1e] rounded-lg p-3">
+                    I need help implementing a resizable component.
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex gap-3">
+                <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
+                  AI
+                </div>
+                <div class="flex-1">
+                  <div class="flex items-baseline gap-2 mb-1">
+                    <span class="text-sm font-semibold text-gray-300">AI Assistant</span>
+                    <span class="text-xs text-gray-500">10:31 AM</span>
+                  </div>
+                  <div class="text-sm text-gray-400 bg-[#2d2d2d] rounded-lg p-3">
+                    Great! The Resizable component supports:
+                    <ul class="list-disc ml-4 mt-2 space-y-1">
+                      <li>Horizontal and vertical layouts</li>
+                      <li>Collapsible panels</li>
+                      <li>Nested layouts</li>
+                      <li>Persistent sizing</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Resizable>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Resizable/stories/Examples.vue b/src/components/Resizable/stories/Examples.vue
new file mode 100644
index 000000000..ab760b1b2
--- /dev/null
+++ b/src/components/Resizable/stories/Examples.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { useStorage } from '@vueuse/core'
+import { Resizable } from 'frappe-ui'
+
+const basicSizes = useStorage('basic-horizontal-demo', [50, 50])
+const verticalSizes = useStorage('vertical-demo', [40, 60])
+const threePanelSizes = useStorage('three-panel-demo', [25, 50, 25])
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div>
+      <h3 class="text-lg font-semibold mb-3">Basic Horizontal Resizable</h3>
+      <div class="h-[400px] border rounded-lg overflow-hidden">
+        <Resizable
+          v-model="basicSizes"
+          direction="horizontal"
+          :panels="[
+            { id: 'left', minSize: 20 },
+            { id: 'right', minSize: 20 }
+          ]"
+        >
+          <template #panel-left>
+            <div class="flex-1 w-full bg-blue-50 flex flex-col items-center justify-center text-blue-900 font-semibold text-center p-4">
+              <div>Left Panel ({{ basicSizes[0]?.toFixed(1) }}%)</div>                
+            </div>
+          </template>
+          <template #panel-right>
+            <div class="flex-1 w-full bg-green-50 flex items-center justify-center text-green-900 font-semibold">
+              Right Panel ({{ basicSizes[1]?.toFixed(1) }}%)
+            </div>
+          </template>
+        </Resizable>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-3">Vertical Resizable</h3>
+      <div class="h-[500px] border rounded-lg overflow-hidden">
+        <Resizable
+          v-model="verticalSizes"
+          direction="vertical"
+          :panels="[
+            { id: 'top', minSize: 25 },
+            { id: 'bottom', minSize: 25 }
+          ]"
+        >
+          <template #panel-top>
+            <div class="flex-1 w-full bg-purple-50 flex items-center justify-center text-purple-900 font-semibold">
+              Top Panel ({{ verticalSizes[0]?.toFixed(1) }}%)
+            </div>
+          </template>
+          <template #panel-bottom>
+            <div class="flex-1 w-full bg-orange-50 flex items-center justify-center text-orange-900 font-semibold">
+              Bottom Panel ({{ verticalSizes[1]?.toFixed(1) }}%)
+            </div>
+          </template>
+        </Resizable>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-3">Three Panel Layout</h3>
+      <div class="h-[450px] border rounded-lg overflow-hidden">
+        <Resizable
+          v-model="threePanelSizes"
+          direction="horizontal"
+          :panels="[
+            { id: 'sidebar', minSize: 15, maxSize: 40 },
+            { id: 'main', minSize: 30 },
+            { id: 'aside', minSize: 15, maxSize: 40 }
+          ]"
+        >
+          <template #panel-sidebar>
+            <div class="flex-1 w-full bg-indigo-50 flex items-center justify-center text-indigo-900 font-semibold p-4 text-center">
+              Sidebar<br/>{{ threePanelSizes[0]?.toFixed(1) }}%
+            </div>
+          </template>
+          <template #panel-main>
+            <div class="flex-1 w-full bg-gray-50 flex items-center justify-center text-gray-900 font-semibold p-4 text-center">
+              Main Content<br/>{{ threePanelSizes[1]?.toFixed(1) }}%
+            </div>
+          </template>
+          <template #panel-aside>
+            <div class="flex-1 w-full bg-pink-50 flex items-center justify-center text-pink-900 font-semibold p-4 text-center">
+              Aside<br/>{{ threePanelSizes[2]?.toFixed(1) }}%
+            </div>
+          </template>
+        </Resizable>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Resizable/stories/NestedLayout.vue b/src/components/Resizable/stories/NestedLayout.vue
new file mode 100644
index 000000000..46021cd98
--- /dev/null
+++ b/src/components/Resizable/stories/NestedLayout.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { useStorage } from '@vueuse/core'
+import { Resizable, ResizableRoot, ResizablePanel, ResizableHandle } from 'frappe-ui'
+
+const outerSizes = useStorage('nested-demo-outer', [30, 70])
+const innerSizes = useStorage('nested-demo-inner', [50, 50])
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="h-[600px] border rounded-lg overflow-hidden">
+      <Resizable
+        v-model="outerSizes"
+        direction="horizontal"
+        :panels="[
+          { id: 'sidebar', minSize: 20, maxSize: 30 },
+          { id: 'content', minSize: 40 }
+        ]"
+      >
+        <template #panel-sidebar>
+          <div class="flex-1 w-full bg-indigo-50 p-4">
+            <h4 class="font-bold text-indigo-900 mb-2">Sidebar</h4>
+            <p class="text-sm text-indigo-700">{{ outerSizes[0]?.toFixed(1) }}%</p>
+            <div class="mt-4 space-y-2">
+              <div class="p-2 bg-indigo-100 rounded text-xs">Menu Item 1</div>
+              <div class="p-2 bg-indigo-100 rounded text-xs">Menu Item 2</div>
+              <div class="p-2 bg-indigo-100 rounded text-xs">Menu Item 3</div>
+            </div>
+          </div>
+        </template>
+        <template #panel-content>
+          <div class="flex-1 w-full bg-white">
+            <Resizable
+              v-model="innerSizes"
+              direction="vertical"
+              :panels="[
+                { id: 'top', minSize: 30 },
+                { id: 'bottom', minSize: 30 }
+              ]"
+            >
+              <template #panel-top>
+                <div class="flex-1 w-full bg-blue-50 p-4">
+                  <h4 class="font-bold text-blue-900 mb-2">Top Content</h4>
+                  <p class="text-sm text-blue-700">{{ innerSizes[0]?.toFixed(1) }}%</p>
+                  <p class="text-xs text-blue-600 mt-2">This is a nested vertical layout inside the horizontal layout.</p>
+                </div>
+              </template>
+              <template #panel-bottom>
+                <div class="flex-1 w-full bg-green-50 p-4">
+                  <h4 class="font-bold text-green-900 mb-2">Bottom Content</h4>
+                  <p class="text-sm text-green-700">{{ innerSizes[1]?.toFixed(1) }}%</p>
+                  <p class="text-xs text-green-600 mt-2">You can nest resizable layouts to create complex interfaces.</p>
+                </div>
+              </template>
+            </Resizable>
+          </div>
+        </template>
+      </Resizable>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Resizable/stories/Reorderable.vue b/src/components/Resizable/stories/Reorderable.vue
new file mode 100644
index 000000000..bcb2f9df4
--- /dev/null
+++ b/src/components/Resizable/stories/Reorderable.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+import { Resizable, FeatherIcon } from 'frappe-ui'
+
+const panels = useStorage('reorderable-story-panels', [
+  { id: 'panel-1', label: 'Panel 1', color: 'bg-blue-50', textColor: 'text-blue-900', minSize: 15 },
+  { id: 'panel-2', label: 'Panel 2', color: 'bg-green-50', textColor: 'text-green-900', minSize: 15 },
+  { id: 'panel-3', label: 'Panel 3', color: 'bg-purple-50', textColor: 'text-purple-900', minSize: 15 },
+  { id: 'panel-4', label: 'Panel 4', color: 'bg-orange-50', textColor: 'text-orange-900', minSize: 15 }
+])
+
+const panelSizes = useStorage('reorderable-story-sizes', [25, 25, 25, 25])
+const draggedIndex = ref(null)
+const dragOverIndex = ref(null)
+
+const handleDragStart = (index) => {
+  draggedIndex.value = index
+}
+
+const handleDragOver = (e, index) => {
+  e.preventDefault()
+  dragOverIndex.value = index
+}
+
+const handleDrop = (e, index) => {
+  e.preventDefault()
+  
+  if (draggedIndex.value === null || draggedIndex.value === index) {
+    draggedIndex.value = null
+    dragOverIndex.value = null
+    return
+  }
+
+  // Reorder panels
+  const newPanels = [...panels.value]
+  const [movedPanel] = newPanels.splice(draggedIndex.value, 1)
+  newPanels.splice(index, 0, movedPanel)
+  panels.value = newPanels
+
+  // Reorder sizes
+  const newSizes = [...panelSizes.value]
+  const [movedSize] = newSizes.splice(draggedIndex.value, 1)
+  newSizes.splice(index, 0, movedSize)
+  panelSizes.value = newSizes
+
+  draggedIndex.value = null
+  dragOverIndex.value = null
+}
+
+const handleDragEnd = () => {
+  draggedIndex.value = null
+  dragOverIndex.value = null
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="h-[550px] border rounded-lg overflow-hidden">
+      <Resizable
+        v-model="panelSizes"
+        direction="horizontal"
+        :panels="panels.map((p, i) => ({ 
+          id: p.id, 
+          minSize: p.minSize,
+          order: i 
+        }))"
+      >
+        <template v-for="(panel, index) in panels" :key="panel.id" #[`panel-${panel.id}`]>
+          <div 
+            class="h-full w-full flex flex-col"
+            :class="[
+              panel.color,
+              dragOverIndex === index && draggedIndex !== index ? 'ring-2 ring-blue-500' : ''
+            ]"
+            @dragover="handleDragOver($event, index)"
+            @drop="handleDrop($event, index)"
+          >
+            <div 
+              class="px-4 py-3 border-b cursor-move select-none flex items-center justify-between"
+              :class="[
+                panel.color === 'bg-blue-50' ? 'border-blue-200 bg-blue-100' :
+                panel.color === 'bg-green-50' ? 'border-green-200 bg-green-100' :
+                panel.color === 'bg-purple-50' ? 'border-purple-200 bg-purple-100' :
+                'border-orange-200 bg-orange-100',
+                draggedIndex === index ? 'opacity-50' : ''
+              ]"
+              draggable="true"
+              @dragstart="handleDragStart(index)"
+              @dragend="handleDragEnd"
+              title="Drag to reorder"
+            >
+              <div class="flex items-center gap-2">
+                <FeatherIcon name="grip-vertical" class="w-4 h-4 opacity-50" />
+                <span class="font-semibold" :class="panel.textColor">{{ panel.label }}</span>
+              </div>
+            </div>
+
+            <div class="flex-1 flex items-center justify-center p-4">
+              <div class="text-center">
+                <div class="text-4xl font-bold mb-2" :class="panel.textColor">
+                  {{ index + 1 }}
+                </div>
+                <p class="text-sm" :class="panel.textColor">
+                  Size: {{ panelSizes[index]?.toFixed(1) }}%
+                </p>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Resizable>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+[draggable="true"] {
+  transition: opacity 0.2s;
+}
+
+[draggable="true"]:active {
+  cursor: grabbing;
+}
+</style>
diff --git a/src/components/Resizable/types.ts b/src/components/Resizable/types.ts
new file mode 100644
index 000000000..aa27f52d1
--- /dev/null
+++ b/src/components/Resizable/types.ts
@@ -0,0 +1,133 @@
+import type { Slots } from 'vue'
+
+export type ResizableDirection = 'horizontal' | 'vertical'
+
+export interface ResizableRootProps {
+    /** Resize axis direction */
+    direction?: ResizableDirection
+    /** Render element or component */
+    as?: string
+    /** Unique identifier (used as fallback for storage persistence) */
+    id?: string
+    /** Controlled panel sizes (%) */
+    modelValue?: number[]
+    /** Initial sizes for uncontrolled mode (%) */
+    defaultValue?: number[]
+    /** Sync sizes across multiple roots */
+    syncId?: string
+    /** Disable all resizing */
+    disabled?: boolean
+    /** Reverse drag direction */
+    reverse?: boolean
+    /** RTL support */
+    rtl?: boolean
+}
+
+export interface ResizableRootEmits {
+    (e: 'update:modelValue', sizes: number[]): void
+    (e: 'resizeStart', payload: { index: number }): void
+    (e: 'resize', payload: { sizes: number[] }): void
+    (e: 'resizeEnd', payload: { sizes: number[] }): void
+    (e: 'reorder', payload: { fromIndex: number; toIndex: number; panels: ResizablePanelConfig[] }): void
+}
+
+export interface ResizablePanelProps {
+    /** Stable panel identity */
+    id?: string
+    /** Optional label for custom container slots */
+    label?: string
+    /** Render element or component */
+    as?: string
+    /** Minimum size in percentage */
+    minSize?: number
+    /** Maximum size in percentage */
+    maxSize?: number
+    /** Initial size in percentage */
+    defaultSize?: number
+    /** Allow panel to collapse */
+    collapsible?: boolean
+    /** Size when collapsed in percentage */
+    collapsedSize?: number
+    /** Panel order for dynamic layouts */
+    order?: number
+    /** Fill remaining space */
+    grow?: boolean
+    /** Disable resize for this panel */
+    resizable?: boolean
+}
+
+export interface ResizablePanelEmits {
+    (e: 'collapse'): void
+    (e: 'expand'): void
+}
+
+export interface ResizableHandleProps {
+    /** Panel boundary index */
+    index?: number
+    /** Render element or component */
+    as?: string
+    /** Disable this handle */
+    disabled?: boolean
+    /** Invisible drag area in pixels */
+    hitArea?: number
+    /** Custom cursor style */
+    cursor?: string
+    /** Accessibility label */
+    ariaLabel?: string
+    /** Arrow key resize step in percentage */
+    keyboardStep?: number
+    /** Show visual handle grip */
+    withHandle?: boolean
+    /** Enable drag-to-reorder panels */
+    draggable?: boolean
+    /** Callback when drag starts */
+    onDragStart?: (index: number) => void
+}
+
+export interface ResizablePanelConfig extends ResizablePanelProps {
+    order?: number
+}
+
+export interface PanelData {
+    id: string
+    size: number
+    minSize: number
+    maxSize: number
+    collapsible: boolean
+    collapsedSize: number
+    order: number
+    grow: boolean
+    resizable: boolean
+    element?: HTMLElement
+    defaultSize?: number
+}
+
+export interface ResizableContext {
+    direction: ResizableDirection
+    disabled: boolean
+    reverse: boolean
+    rtl: boolean
+    panels: Map<string, PanelData>
+    registerPanel: (id: string, data: PanelData) => void
+    unregisterPanel: (id: string) => void
+    updatePanelSize: (id: string, size: number) => void
+    getPanelSize: (id: string) => number
+    startResize: (index: number) => void
+    resize: (delta: number) => void
+    endResize: () => void
+    isResizing: boolean
+}
+
+export interface ResizableProviderContext {
+    panels: ResizablePanelConfig[]
+    hasPanels: boolean
+    rootProps: ResizableRootProps
+    slots: Slots
+    attrs: Record<string, unknown>
+    listeners: {
+        'update:modelValue': (sizes: number[]) => void
+        resizeStart: (payload: { index: number }) => void
+        resize: (payload: { sizes: number[] }) => void
+        resizeEnd: (payload: { sizes: number[] }) => void
+    }
+}
diff --git a/src/components/Resizable/utils.ts b/src/components/Resizable/utils.ts
new file mode 100644
index 000000000..a2b0a126a
--- /dev/null
+++ b/src/components/Resizable/utils.ts
@@ -0,0 +1,170 @@
+import { InjectionKey, type ComputedRef } from 'vue'
+import type { ResizableContext, ResizableProviderContext } from './types'
+
+export const RESIZABLE_CONTEXT_KEY: InjectionKey<ResizableContext> = Symbol('resizable-context')
+export const RESIZABLE_PROVIDER_KEY: InjectionKey<ComputedRef<ResizableProviderContext>> =
+    Symbol('resizable-provider')
+
+export function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max)
+}
+
+
+export function distributeSizes(
+    totalSize: number,
+    panels: Array<{ minSize: number; maxSize: number; defaultSize?: number; grow?: boolean }>,
+    currentSizes?: number[]
+): number[] {
+    const sizes: number[] = []
+    let remaining = 100
+
+    for (let i = 0; i < panels.length; i++) {
+        const panel = panels[i]
+        let size = currentSizes?.[i] ?? panel.defaultSize ?? 0
+
+        if (size === 0 && panels.length > 0) {
+            size = 100 / panels.length
+        }
+
+        size = clamp(size, panel.minSize, panel.maxSize)
+        sizes.push(size)
+        remaining -= size
+    }
+
+    if (remaining !== 0) {
+        const growPanels = panels
+            .map((p, i) => ({ ...p, index: i }))
+            .filter(p => p.grow)
+
+        if (growPanels.length > 0) {
+            const perPanel = remaining / growPanels.length
+
+            for (const panel of growPanels) {
+                const newSize = clamp(
+                    sizes[panel.index] + perPanel,
+                    panel.minSize,
+                    panel.maxSize
+                )
+                sizes[panel.index] = newSize
+            }
+        }
+    }
+
+    const total = sizes.reduce((sum, size) => sum + size, 0)
+    if (total !== 100 && total > 0) {
+        return sizes.map(size => (size / total) * 100)
+    }
+
+    return sizes
+}
+
+
+
+export function adjustSizes(
+    sizes: number[],
+    index: number,
+    delta: number,
+    panels: Array<{ minSize: number; maxSize: number; collapsible: boolean; collapsedSize: number }>
+): number[] {
+    const newSizes = [...sizes]
+
+    if (index < 0 || index >= newSizes.length - 1) {
+        return newSizes
+    }
+
+    const leftPanel = panels[index]
+    const rightPanel = panels[index + 1]
+
+    const initialLeft = newSizes[index]
+    const initialRight = newSizes[index + 1]
+    const totalSize = initialLeft + initialRight
+
+    let targetLeft = initialLeft + delta
+
+    let useLeftCollapsed = false
+    if (leftPanel.collapsible) {
+        if (initialLeft <= leftPanel.collapsedSize) {
+            if (targetLeft > leftPanel.collapsedSize) {
+                if (targetLeft < leftPanel.minSize) {
+                    if (delta > 0) {
+                        useLeftCollapsed = false
+                        const threshold = leftPanel.collapsedSize + (leftPanel.minSize - leftPanel.collapsedSize) * 0.05
+                        if (targetLeft > threshold) {
+                        } else {
+                            useLeftCollapsed = true
+                        }
+                    } else {
+                        useLeftCollapsed = true
+                    }
+                }
+            } else {
+                useLeftCollapsed = true
+            }
+        } else {
+            if (targetLeft < leftPanel.minSize) {
+                useLeftCollapsed = true
+            }
+        }
+    }
+
+    let useRightCollapsed = false
+    if (rightPanel.collapsible) {
+        const currentRight = totalSize - initialLeft
+        const targetRight = totalSize - targetLeft
+
+        if (currentRight <= rightPanel.collapsedSize) {
+            if (targetRight > rightPanel.collapsedSize) {
+                if (targetRight < rightPanel.minSize) {
+                    if (delta < 0) {
+                        useRightCollapsed = false
+                        const threshold = rightPanel.collapsedSize + (rightPanel.minSize - rightPanel.collapsedSize) * 0.05
+                        if (targetRight <= threshold) {
+                            useRightCollapsed = true
+                        }
+                    } else {
+                        useRightCollapsed = true
+                    }
+                }
+            } else {
+                useRightCollapsed = true
+            }
+        } else {
+            if (totalSize - targetLeft < rightPanel.minSize) {
+                useRightCollapsed = true
+            }
+        }
+    }
+
+    let finalLeft = targetLeft
+
+    const minLeft = leftPanel.minSize
+    const maxLeft = leftPanel.maxSize
+    const minLeftFromRight = totalSize - rightPanel.maxSize
+    const maxLeftFromRight = totalSize - rightPanel.minSize
+
+    const constraintMin = Math.max(minLeft, minLeftFromRight)
+    const constraintMax = Math.min(maxLeft, maxLeftFromRight)
+
+    if (useLeftCollapsed) {
+        finalLeft = leftPanel.collapsedSize
+    } else if (useRightCollapsed) {
+        const finalRight = rightPanel.collapsedSize
+        finalLeft = totalSize - finalRight
+    } else {
+        let effectiveMin = constraintMin
+        let effectiveMax = constraintMax
+
+        if (leftPanel.collapsible && initialLeft <= leftPanel.collapsedSize && delta > 0) {
+        }
+
+        if (rightPanel.collapsible && (totalSize - initialLeft) <= rightPanel.collapsedSize && delta < 0) {
+        }
+
+        finalLeft = clamp(targetLeft, effectiveMin, effectiveMax)
+    }
+
+    newSizes[index] = finalLeft
+    newSizes[index + 1] = totalSize - finalLeft
+
+    return newSizes
+}
diff --git a/src/index.ts b/src/index.ts
index 597c8c8c8..aa3ee7858 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,6 +30,7 @@ export { default as LoadingText } from './components/LoadingText.vue'
 export * from './components/Progress'
 export * from './components/Popover'
 export * from './components/Rating'
+export * from './components/Resizable'
 export { default as Resource } from './components/Resource.vue'
 export * from './components/Select'
 export * from './components/Slider'