Introduction

A layout component that divides content into resizable panels separated by drag handles.

Usage

Basic Splitter

import { Splitter } from "../components/ui";

export default function MyPage() {
  return (
    <Splitter
      orientation="horizontal"
      panels={[
        { id: "left", content: <aside>Sidebar</aside> },
        { id: "right", content: <main>Content</main> },
      ]}
    />
  );
}

CMS Page Builder

This component is available as a splitter block in the Page Builder (content/pages/*.json). Always renders static (interactive={false}, no drag-to-resize) — a panel's content is arbitrary nested JSX, which can't cross the island's prop-serialisation boundary the way children can:

{
  "type": "splitter",
  "orientation": "horizontal",
  "panels": [
    { "id": "left", "content": [{ "type": "text", "content": "Left panel" }] },
    { "id": "right", "content": [{ "type": "text", "content": "Right panel" }] }
  ]
}

Props

Splitter

Prop	Type	Description
panels	PanelConfig[]	The panels to render (required).

| orientation | `"horizontal" \ | "vertical"` | Layout direction of the panels. |

| interactive | boolean | Enable client-side drag-to-resize. |

| defaultSize | `{ id: string \ | number; size: number }[]` | Initial sizes (interactive mode). | | size | `{ id: string \ | number; size: number }[]` | Controlled sizes (interactive mode). | | onSizeChange | `(sizes: { id: string \ | number; size: number }[]) => void` | Callback when sizes change. |

| resizeTriggerClass | string | Custom CSS classes for the resize handles. | | class | string | Custom CSS classes for the root element. |

| style | `Record<string, string \ | number>` | Inline styles for the root element. |

| id | string | Custom id for the root element. |

PanelConfig

Property	Type	Description

| id | `string \ | number` | Unique identifier for the panel. | | content | `JSX.Element \ | string` | Content rendered inside the panel. |

| class | string | Custom CSS classes for the panel. |

| style | `Record<string, string \ | number>` | Inline styles for the panel. |