Splitter

Resizable split panels. Panels carry data-panel-id; resize triggers carry data-id naming the two adjacent panels ("a:b"). The panels config is derived from the DOM.

Sidebar

Content

<div class="h-40 w-full">
  <div
    data-controller="zag-splitter"
    data-part="root"
    data-zag-splitter-size-value="[40,60]"
    class="border-border flex overflow-hidden rounded-lg border"
  >
    <div
      data-part="panel"
      data-panel-id="a"
      class="bg-accent text-muted-foreground grid place-items-center text-sm"
    >
      Sidebar
    </div>
    <div
      data-part="resize-trigger"
      data-id="a:b"
      class="bg-muted hover:bg-primary data-[focus]:bg-primary w-1.5 cursor-col-resize"
    ></div>
    <div
      data-part="panel"
      data-panel-id="b"
      class="bg-popover text-muted-foreground grid place-items-center text-sm"
    >
      Content
    </div>
  </div>
</div>

Parts

root, panel, resize-trigger, resize-trigger-indicator.

Values

Attribute	Type	Default	Description
data-zag-splitter-size-value	Array	[]	Initial panel sizes (%) (JSON).
data-zag-splitter-orientation-value	String	"horizontal"	"horizontal" or "vertical".

Events

Emits zag-splitter:resize — detail is { size }.

Programmatic control

sizes (getter), setSizes(number[]).