Components / Layout

Resizable

Keyboard- and pointer-resizable horizontal or vertical panel groups.

Preview

Explorer

src

App.vue

theme.css

README.md

App.vue Vue

<script setup>
const project = ref('Aurora')
const ready = computed(() => true)
</script>

Aurora preview

Live workspace panel

Use cases

Editor split

Let readers allocate space between a file list and an editor.

Preview workspace

Resize source and preview panes while preserving minimum useful widths.

Usage example

Vue

<ResizableGroup class="h-64" orientation="horizontal">
  <ResizablePanel :default-size="35">Navigation</ResizablePanel>
  <ResizableHandle aria-label="Resize navigation" />
  <ResizablePanel :default-size="65">
    <ResizableGroup class="h-full w-full" orientation="vertical">
      <ResizablePanel :default-size="55">Editor</ResizablePanel>
      <ResizableHandle aria-label="Resize editor and preview" />
      <ResizablePanel :default-size="45">Preview</ResizablePanel>
    </ResizableGroup>
  </ResizablePanel>
</ResizableGroup>

More examples

Editor split

Default percentages add up to the available group space.

Editor split

<script setup lang="ts">
import ResizableGroup from './components/ui/resizable/ResizableGroup.vue'
import ResizableHandle from './components/ui/resizable/ResizableHandle.vue'
import ResizablePanel from './components/ui/resizable/ResizablePanel.vue'
</script>

<template>
  <ResizableGroup class="h-80" orientation="horizontal">
    <ResizablePanel :default-size="30" :min-size="20">Files</ResizablePanel>
    <ResizableHandle aria-label="Resize file list" />
    <ResizablePanel :default-size="70" :min-size="35">Editor</ResizablePanel>
  </ResizableGroup>
</template>

Vertical preview

The same contract also works from top to bottom.

Vertical preview

<script setup lang="ts">
import ResizableGroup from './components/ui/resizable/ResizableGroup.vue'
import ResizableHandle from './components/ui/resizable/ResizableHandle.vue'
import ResizablePanel from './components/ui/resizable/ResizablePanel.vue'
</script>

<template>
  <ResizableGroup class="h-96" orientation="vertical" :default-value="[60, 40]">
    <ResizablePanel :min-size="25">Preview</ResizablePanel>
    <ResizableHandle aria-label="Resize preview and logs" />
    <ResizablePanel :min-size="20">Build logs</ResizablePanel>
  </ResizableGroup>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Resizable
Name	Type	Default or requirement
`v-model / defaultValue`	number[]	panel defaults
`orientation`	horizontal \| vertical	horizontal
`direction`	ltr \| rtl	ltr
`Panel minSize / maxSize`	number, percent	10 / 100

Handles expose separator values and support arrows, Home, End, Enter, pointer dragging, nesting, and collapsible constraints.

Implementation notes

Choose panel minimums that keep each pane useful at the smallest supported viewport.
The group needs a bounded dimension along its resize axis.

Accessibility and localization

Handles expose separator values and support arrow keys, Home, End, and Enter.