Resizable Item

kai-resizable-item

Carries that panel’s size and limits, so the layout around it needs no extra code.

• Shadow DOM
• All-attribute API
• px or % sizes
• Lockable panel
• Hideable with reflow

Preview

When to use

A direct child of <kai-resizable>, one per panel. Give a panel with a natural default width an explicit size; leave size off the main area so it fills what remains. locked for chrome panels.

Usage

<kai-resizable-item> has no standalone rendering — always place it inside <kai-resizable>:

<kai-resizable orientation="horizontal" style="display:block;height:400px">
  <kai-resizable-item size="260px" min="160px" locked>
    <!-- sidebar content -->
  </kai-resizable-item>
  <kai-resizable-item>
    <!-- main content fills remaining space -->
  </kai-resizable-item>
  <kai-resizable-item size="35%" min="200px">
    <!-- preview / inspector pane -->
  </kai-resizable-item>
</kai-resizable>

<script type="module">
  import '@kitn.ai/ui/web-components';
</script>

• size — initial main-axis size: "280px" or "25%". Omit for a flexible panel (flex: 1 1 0%).
• min / max — drag bounds in px or %, e.g. min="120px", max="50%".
• locked — fixes the panel; adjacent dividers become non-draggable separators.
• hidden — removes the panel and its divider; remaining panels reflow. Toggle via JS to collapse/restore.

Resize events (kai-change, kai-maximize-change) fire on the parent <kai-resizable>, not the item. See the Resizable page for the full event reference.

Examples

Flexible Panel

No size, so it stretches to fill what siblings leave. Right choice for the primary content area.

Code

Sized Panel

size sets the initial width; the user can still drag unless locked is also set.

Code

Locked Panel

locked fixes the panel at its size and turns adjacent dividers into non-draggable separators.

Code

Slots

Slot	Mode	Purpose
(default)	inject	This panel's content.

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
size	string	—	Initial main-axis size: `"280px"` (fixed) or `"25%"`/`25` (percent). Omitted → flexible.
min	string	—	Minimum size during resize (px or %).
max	string	—	Maximum size during resize (px or %).
locked	boolean	false	Fix this panel's size; adjacent dividers become non-draggable.
hidden	boolean	false	Hide this panel; its divider is dropped and the rest reflow.
collapsed	boolean	false	Collapse this panel. Works as a bare boolean from framework JSX; `hidden` does not.

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