Resizable Item

kai-resizable-item

A passive panel slot that carries layout config for its enclosing <kai-resizable> — set size, min, max, locked, or hidden as attributes and the parent handles the rest.

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

Preview

When to use

Use <kai-resizable-item> as a direct child of <kai-resizable> to define each panel. Give panels with a natural default width an explicit size (e.g. a sidebar at "260px"); leave size off the main content area so it fills remaining space. Use locked for chrome panels that must never resize, and toggle hidden to collapse a panel on demand.

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/elements';
</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 — stretches to fill whatever space siblings leave. Right choice for the primary content area.

Code

Sized Panel

size="260px" sets the initial width. The user can still drag to resize unless locked is also set.

Code

Locked Panel

locked fixes the panel at its size — adjacent dividers become non-draggable. Use for nav sidebars and tool panels.

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. Same layout effect as `hidden` (divider dropped, the rest reflow), but it WORKS as a bare boolean from framework JSX. A plain `<kai-resizable-item collapsed>` in React/Solid/Vue/Svelte collapses the panel at the first render; `hidden` does not, because a JSX boolean sets neither the `hidden` attribute nor the IDL property on a custom element, so the parent never sees it. The facade reflects `collapsed` to a `collapsed` attribute the parent reads. Prefer this over `hidden` for declarative collapse.

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