Resizable

kai-resizable

Compose a draggable multi-panel shell — sidebar + chat, list + inspector, three-up — by placing <kai-resizable-item> children inside; dividers, drag logic, keyboard resize, and expand-to-fill are handled for you.

• Shadow DOM
• 2 events
• Up to 3 panels (nest for more)
• px or % sizing
• Expand-to-fill protocol

Preview

When to use

Use <kai-resizable> for any app shell built from regions the user should resize — a conversation list beside a thread, a thread beside an artifact, a stacked code-editor / output split. In SolidJS, use the Resizable and ResizablePanel components from @kitn.ai/ui directly for tighter reactivity integration.

Usage

<kai-resizable orientation="horizontal" style="display:block;height:400px">
  <kai-resizable-item size="25%" min="160px"> <!-- list panel --> </kai-resizable-item>
  <kai-resizable-item> <!-- chat panel, fills remaining space --> </kai-resizable-item>
  <kai-resizable-item size="30%"> <!-- preview panel --> </kai-resizable-item>
</kai-resizable>

<script type="module">
  import '@kitn.ai/ui/elements';
  document.querySelector('kai-resizable')
    .addEventListener('kai-change', (e) => console.log(e.detail.sizes));
</script>

• size — initial main-axis size: "280px" or "25%". Omit for a flexible panel that fills remaining space.
• min / max — resize bounds in px or %, e.g. min="140px" or max="50%".
• locked — fixes the panel; adjacent dividers become non-draggable separators.
• hidden — removes the panel and its divider; remaining panels reflow. Toggle at runtime to collapse/restore.
• maximizedIndex — set this property to the zero-based panel index to maximize it (null to restore). Or call el.maximize(n) / el.restore() imperatively.

Expand-to-fill — when a <kai-artifact expandable> fires kai-maximize-intent (bubbling, composed), the nearest enclosing <kai-resizable> catches it automatically and hides siblings. No wiring needed. Escape or Collapse restores the layout.

Examples

Sidebar + Chat

Code

Vertical Split

Code

Three-Panel Layout

Code

Expand-to-Fill Protocol

Wire <kai-artifact expandable> inside an item — pressing Expand maximizes that panel automatically:

<kai-resizable orientation="horizontal" style="display:block;height:480px">
  <kai-resizable-item size="20%" min="120px"> …list… </kai-resizable-item>
  <kai-resizable-item min="140px">           …chat… </kai-resizable-item>
  <kai-resizable-item size="35%" min="200px">
    <kai-artifact src="…/index.html" expandable></kai-artifact>
  </kai-resizable-item>
</kai-resizable>

<script type="module">
  import '@kitn.ai/ui/elements';
  const r = document.querySelector('kai-resizable');
  r.addEventListener('kai-change', (e) => console.log('sizes', e.detail.sizes));
  r.addEventListener('kai-maximize-change', (e) => console.log(e.detail));
  // r.restore(); or r.maximizedIndex = null;
</script>

Props

Property	Type	Default	Notes
orientation	"horizontal" | "vertical"	'horizontal'	Layout axis: `horizontal` (row, default) or `vertical` (column).
maximizedIndex	null | number	null	Which item index is maximized (null = none). Declarative source of truth.

Events

Event	Detail	Notes
kai-change	{ … }	Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent.
kai-maximize-change	{ … }	Observe layout maximize state.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ResizableHandle

---

Need a hand? Report a bug Ask for help