Resizable

Split pane layouts with draggable handles for resizing panels.

Interactive Requires: veritheme.js JS init: automatic

Horizontal

Two side-by-side panels separated by a vertical drag handle. Drag to resize.

html

Panel 1

60%

Panel 2

40%

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-overflow-hidden vt-h-64 vt-flex vt-bg-surface-card" data-resizable="horizontal">
  <!-- Left panel ~60% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-86d5a62908">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Panel 1</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">60%</span>
    </div>
  </div>
  <!-- Drag handle -->
  <div class="vt-w-1.5 vt-bg-border-default vt-flex vt-flex-col vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-col-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Right panel ~40% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-3ec96985f7">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Panel 2</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">40%</span>
    </div>
  </div>
</div>

Vertical

Two stacked panels separated by a horizontal drag handle. Drag to resize.

html

Top Panel

50%

Bottom Panel

50%

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-overflow-hidden vt-h-80 vt-flex vt-flex-col vt-bg-surface-card" data-resizable="vertical">
  <!-- Top panel ~50% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-h-0 vt-inline-99fa4f924e">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Top Panel</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">50%</span>
    </div>
  </div>
  <!-- Drag handle -->
  <div class="vt-h-1.5 vt-bg-border-default vt-flex vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-row-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Bottom panel ~50% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-h-0 vt-inline-99fa4f924e">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Bottom Panel</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">50%</span>
    </div>
  </div>
</div>

Three Panels

Three horizontal panels with two drag handles. Drag to resize.

html

Panel 1

30%

Panel 2

40%

Panel 3

30%

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-overflow-hidden vt-h-64 vt-flex vt-bg-surface-card" data-resizable="horizontal">
  <!-- Panel 1 ~30% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-6528b2713f">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Panel 1</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">30%</span>
    </div>
  </div>
  <!-- Drag handle -->
  <div class="vt-w-1.5 vt-bg-border-default vt-flex vt-flex-col vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-col-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Panel 2 ~40% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-3ec96985f7">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Panel 2</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">40%</span>
    </div>
  </div>
  <!-- Drag handle -->
  <div class="vt-w-1.5 vt-bg-border-default vt-flex vt-flex-col vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-col-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Panel 3 ~30% -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-6528b2713f">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Panel 3</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <span class="vt-text-sm vt-text-foreground-muted vt-size-label">30%</span>
    </div>
  </div>
</div>

With Content

Resizable IDE-like layout. Drag the handle to resize.

html

Explorer

index.ts

utils.ts

styles.css

components/

README.md

index.ts TypeScript

1import app from './app'

3const port = 3000

5app.listen(port)

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-overflow-hidden vt-h-80 vt-flex vt-bg-surface-card" data-resizable="horizontal">
  <!-- Sidebar / File tree -->
  <div class="vt-p-3 vt-flex vt-flex-col vt-min-w-0 vt-overflow-hidden vt-inline-6528b2713f">
    <p class="vt-section-label vt-mb-3">Explorer</p>
    <div class="vt-space-y-0.5 vt-text-sm">
      <div class="vt-flex vt-items-center vt-gap-2 vt-px-2 vt-py-1 vt-rounded vt-bg-surface-subtle vt-text-foreground-primary">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-4 vt-h-4 vt-text-info-fill vt-shrink-0">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg>
        <span class="vt-truncate">index.ts</span>
      </div>
      <div class="vt-flex vt-items-center vt-gap-2 vt-px-2 vt-py-1 vt-rounded vt-hover:bg-surface-subtle/50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-4 vt-h-4 vt-text-info-fill vt-shrink-0">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg>
        <span class="vt-truncate vt-text-foreground-muted">utils.ts</span>
      </div>
      <div class="vt-flex vt-items-center vt-gap-2 vt-px-2 vt-py-1 vt-rounded vt-hover:bg-surface-subtle/50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-4 vt-h-4 vt-text-info-fill vt-shrink-0">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg>
        <span class="vt-truncate vt-text-foreground-muted">styles.css</span>
      </div>
      <div class="vt-flex vt-items-center vt-gap-2 vt-px-2 vt-py-1 vt-rounded vt-hover:bg-surface-subtle/50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-folder vt-w-4 vt-h-4 vt-text-warning-fill vt-shrink-0">
          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
        </svg>
        <span class="vt-truncate vt-text-foreground-muted">components/</span>
      </div>
      <div class="vt-flex vt-items-center vt-gap-2 vt-px-2 vt-py-1 vt-rounded vt-hover:bg-surface-subtle/50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg>
        <span class="vt-truncate vt-text-foreground-muted">README.md</span>
      </div>
    </div>
  </div>
  <!-- Drag handle -->
  <div class="vt-w-1.5 vt-bg-border-default vt-flex vt-flex-col vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-col-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Editor area -->
  <div class="vt-flex vt-flex-col vt-min-w-0 vt-overflow-hidden vt-inline-49c9406408">
    <div class="vt-flex vt-items-center vt-border-b vt-border-border-default vt-px-3 vt-h-10 vt-shrink-0">
      <span class="vt-text-xs vt-font-medium vt-text-foreground-primary">index.ts</span>
      <span class="vt-text-xs vt-text-foreground-muted vt-ml-auto">TypeScript</span>
    </div>
    <div class="vt-flex-1 vt-p-3 vt-font-mono vt-text-xs vt-leading-relaxed vt-text-foreground-muted vt-overflow-hidden">
      <div class="vt-flex vt-gap-3"><span class="vt-text-foreground-muted/50 vt-select-none vt-w-5 vt-text-right">1</span><span class="vt-text-info-fill">import</span> app <span class="vt-text-info-fill">from</span> <span class="vt-text-info-fill">'./app'</span></div>
      <div class="vt-flex vt-gap-3"><span class="vt-text-foreground-muted/50 vt-select-none vt-w-5 vt-text-right">2</span></div>
      <div class="vt-flex vt-gap-3"><span class="vt-text-foreground-muted/50 vt-select-none vt-w-5 vt-text-right">3</span><span class="vt-text-info-fill">const</span> port = <span class="vt-text-warning-fill">3000</span></div>
      <div class="vt-flex vt-gap-3"><span class="vt-text-foreground-muted/50 vt-select-none vt-w-5 vt-text-right">4</span></div>
      <div class="vt-flex vt-gap-3"><span class="vt-text-foreground-muted/50 vt-select-none vt-w-5 vt-text-right">5</span>app.listen(port)</div>
    </div>
  </div>
</div>

Nested

Horizontal split with a nested vertical split. Drag handles to resize.

html

Sidebar

Editor

Terminal

$ npm run dev

Server running on port 3000

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-overflow-hidden vt-h-80 vt-flex vt-bg-surface-card" data-resizable="horizontal">
  <!-- Sidebar -->
  <div class="vt-p-3 vt-flex vt-flex-col vt-min-w-0 vt-inline-d3f64fb6b8">
    <p class="vt-section-label vt-mb-3">Sidebar</p>
    <div class="vt-space-y-1">
      <div class="vt-h-6 vt-flex vt-items-center vt-gap-2 vt-px-2 vt-rounded vt-bg-surface-subtle">
        <div class="vt-w-3 vt-h-3 vt-rounded-sm vt-bg-info-fill/30"></div>
        <div class="vt-h-3 vt-bg-foreground-primary/20 vt-rounded vt-w-16"></div>
      </div>
      <div class="vt-h-6 vt-flex vt-items-center vt-gap-2 vt-px-2 vt-rounded">
        <div class="vt-w-3 vt-h-3 vt-rounded-sm vt-bg-foreground-muted/20"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/20 vt-rounded vt-w-20"></div>
      </div>
      <div class="vt-h-6 vt-flex vt-items-center vt-gap-2 vt-px-2 vt-rounded">
        <div class="vt-w-3 vt-h-3 vt-rounded-sm vt-bg-foreground-muted/20"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/20 vt-rounded vt-w-14"></div>
      </div>
      <div class="vt-h-6 vt-flex vt-items-center vt-gap-2 vt-px-2 vt-rounded">
        <div class="vt-w-3 vt-h-3 vt-rounded-sm vt-bg-foreground-muted/20"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/20 vt-rounded vt-w-18"></div>
      </div>
    </div>
  </div>
  <!-- Drag handle (vertical) -->
  <div class="vt-w-1.5 vt-bg-border-default vt-flex vt-flex-col vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-col-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Right area with nested vertical split -->
  <div class="vt-flex vt-flex-col vt-min-w-0 vt-inline-9e2b4e9088" data-resizable="vertical">
    <!-- Editor (top) -->
    <div class="vt-p-3 vt-flex vt-flex-col vt-min-h-0 vt-inline-3ac612ca5a">
      <div class="vt-flex vt-items-center vt-gap-2 vt-mb-2">
        <div class="vt-h-5 vt-px-2 vt-rounded-t vt-bg-surface-subtle vt-text-xs vt-flex vt-items-center vt-text-foreground-muted">Editor</div>
      </div>
      <div class="vt-flex-1 vt-rounded vt-bg-surface-moderate/30 vt-p-2 vt-font-mono vt-text-xs vt-text-foreground-muted vt-space-y-1 vt-overflow-hidden">
        <div class="vt-h-3 vt-bg-foreground-muted/10 vt-rounded vt-w-3/4"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/10 vt-rounded vt-w-1/2"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/10 vt-rounded vt-w-5/6"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/10 vt-rounded vt-w-2/3"></div>
        <div class="vt-h-3 vt-bg-foreground-muted/10 vt-rounded vt-w-4/5"></div>
      </div>
    </div>
    <!-- Drag handle (horizontal) -->
    <div class="vt-h-1.5 vt-bg-border-default vt-flex vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-row-resize vt-flex-shrink-0 vt-resize-handle">
      <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
      <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
      <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    </div>
    <!-- Terminal (bottom) -->
    <div class="vt-p-3 vt-flex vt-flex-col vt-min-h-0 vt-inline-a93b570b5c">
      <div class="vt-flex vt-items-center vt-gap-2 vt-mb-2">
        <div class="vt-h-5 vt-px-2 vt-rounded-t vt-bg-surface-subtle vt-text-xs vt-flex vt-items-center vt-text-foreground-muted">Terminal</div>
      </div>
      <div class="vt-flex-1 vt-rounded vt-bg-surface-moderate/30 vt-p-2 vt-font-mono vt-text-xs vt-text-foreground-muted vt-overflow-hidden">
        <div class="vt-text-info-fill">$ npm run dev</div>
        <div class="vt-mt-1 vt-text-foreground-muted/60">Server running on port 3000</div>
      </div>
    </div>
  </div>
</div>

With Min/Max Constraints

Drag to resize. Panels are clamped between min and max values.

html

Sidebar

min: 200px

max: 400px

Content

min: 300px

max: 600px

<div class="vt-rounded-2xl vt-border vt-border-border-default vt-overflow-hidden vt-h-64 vt-flex vt-bg-surface-card" data-resizable="horizontal" data-min="20" data-max="70">
  <!-- Left panel -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-3ec96985f7">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Sidebar</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <div class="vt-text-center">
        <div class="vt-flex vt-items-center vt-gap-1.5 vt-mb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trending-up vt-w-3.5 vt-h-3.5 vt-text-info-fill">
            <path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path>
          </svg>
          <span class="vt-text-xs vt-font-mono vt-text-info-fill">min: 200px</span>
        </div>
        <div class="vt-flex vt-items-center vt-gap-1.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trending-down vt-w-3.5 vt-h-3.5 vt-text-warning-fill">
            <path d="M16 17h6v-6"></path><path d="m22 17-8.5-8.5-5 5L2 7"></path>
          </svg>
          <span class="vt-text-xs vt-font-mono vt-text-warning-fill">max: 400px</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Drag handle -->
  <div class="vt-w-1.5 vt-bg-border-default vt-flex vt-flex-col vt-items-center vt-justify-center vt-gap-0.5 vt-hover:bg-info-fill/50 vt-transition-colors vt-cursor-col-resize vt-flex-shrink-0 vt-resize-handle">
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
    <div class="vt-w-0.5 vt-h-0.5 vt-rounded-full vt-bg-foreground-muted"></div>
  </div>
  <!-- Right panel -->
  <div class="vt-p-4 vt-flex vt-flex-col vt-min-w-0 vt-inline-86d5a62908">
    <p class="vt-text-xs vt-font-medium vt-text-foreground-muted vt-mb-2">Content</p>
    <div class="vt-flex-1 vt-flex vt-items-center vt-justify-center">
      <div class="vt-text-center">
        <div class="vt-flex vt-items-center vt-gap-1.5 vt-mb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trending-up vt-w-3.5 vt-h-3.5 vt-text-info-fill">
            <path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path>
          </svg>
          <span class="vt-text-xs vt-font-mono vt-text-info-fill">min: 300px</span>
        </div>
        <div class="vt-flex vt-items-center vt-gap-1.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trending-down vt-w-3.5 vt-h-3.5 vt-text-warning-fill">
            <path d="M16 17h6v-6"></path><path d="m22 17-8.5-8.5-5 5L2 7"></path>
          </svg>
          <span class="vt-text-xs vt-font-mono vt-text-warning-fill">max: 600px</span>
        </div>
      </div>
    </div>
  </div>
</div>

Guidelines

User-adjustable split panes (editors, consoles). Fixed layouts → grid utilities.

Editor

Preview

Use resizable for panes users adjust, like editors and consoles.

Acme

Home Pricing Docs

Don't

Don't use resizable for fixed layouts — reach for grid utilities.

API Reference

All CSS classes available for the Resizable component.

Class	Type	Description
`data-resizable="horizontal"`	Base	Horizontal split pane container (side-by-side panels)
`data-resizable="vertical"`	Base	Vertical split pane container (stacked panels)
`vt-resize-handle`	Base	Draggable handle between panels
`vt-w-1.5 vt-bg-border-default`	Handle	Vertical drag handle styling (horizontal layout)
`vt-h-1.5 vt-bg-border-default`	Handle	Horizontal drag handle styling (vertical layout)
`vt-cursor-col-resize`	Handle	Column resize cursor for horizontal handles
`vt-cursor-row-resize`	Handle	Row resize cursor for vertical handles
`vt-hover:bg-info-fill/50`	Handle	Handle hover highlight
`vt-flex`	Layout	Horizontal panel layout container
`vt-flex vt-flex-col`	Layout	Vertical panel layout container
`vt-min-w-0`	Layout	Panel min-width reset for horizontal panels
`vt-min-h-0`	Layout	Panel min-height reset for vertical panels
`data-min`	Modifier	Minimum panel size percentage (attribute)
`data-max`	Modifier	Maximum panel size percentage (attribute)

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Resize handle uses role="separator" with aria-orientation
Keyboard	Arrow keys resize panels when handle is focused
Label	Handle should have aria-label="Resize" for screen readers
Min/Max	Use aria-valuemin, aria-valuemax, aria-valuenow on the handle