Resizable — uicraft

Horizontal

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

html

Panel 1

60%

Panel 2

40%

<div data-resizable="horizontal" class="uc-flex">
  <div class="panel">Panel 1</div>
  <div class="uc-resize-handle"></div>
  <div class="panel">Panel 2</div>
</div>

Vertical

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

html

Top Panel

50%

Bottom Panel

50%

<div data-resizable="vertical" class="uc-flex uc-flex-col">
  <div class="panel">Top Panel</div>
  <div class="uc-resize-handle"></div>
  <div class="panel">Bottom Panel</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 data-resizable="horizontal" class="uc-flex">
  <div class="panel">Panel 1</div>
  <div class="uc-resize-handle"></div>
  <div class="panel">Panel 2</div>
  <div class="uc-resize-handle"></div>
  <div class="panel">Panel 3</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'

2

3const port = 3000

4

5app.listen(port)

<div data-resizable="horizontal" class="uc-flex">
  <div class="sidebar">
    <h3>Explorer</h3>
    <div class="file-item active">
      <svg>...</svg>
      <span>index.ts</span>
    </div>
    <div class="file-item">...</div>
  </div>
  <div class="uc-resize-handle"></div>
  <div class="editor">
    <div class="tab-bar">index.ts</div>
    <pre><code>import app from './app'

const port = 3000

app.listen(port)</code></pre>
  </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 data-resizable="horizontal" class="uc-flex">
  <div class="sidebar">Sidebar</div>
  <div class="uc-resize-handle"></div>
  <div data-resizable="vertical" class="uc-flex uc-flex-col">
    <div class="editor">Editor</div>
    <div class="uc-resize-handle"></div>
    <div class="terminal">Terminal</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 data-resizable="horizontal" data-min="20" data-max="70" class="uc-flex">
  <div class="panel">Sidebar (min: 200px, max: 400px)</div>
  <div class="uc-resize-handle"></div>
  <div class="panel">Content (min: 300px, max: 600px)</div>
</div>

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)
`uc-resize-handle`	Base	Draggable handle between panels
`uc-w-1.5 uc-bg-border-default`	Handle	Vertical drag handle styling (horizontal layout)
`uc-h-1.5 uc-bg-border-default`	Handle	Horizontal drag handle styling (vertical layout)
`uc-cursor-col-resize`	Handle	Column resize cursor for horizontal handles
`uc-cursor-row-resize`	Handle	Row resize cursor for vertical handles
`uc-hover:bg-accents-blue/50`	Handle	Handle hover highlight
`uc-flex`	Layout	Horizontal panel layout container
`uc-flex uc-flex-col`	Layout	Vertical panel layout container
`uc-min-w-0`	Layout	Panel min-width reset for horizontal panels
`uc-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