Split Pane

Foundations · InboxList, SplitPane

Resizable list–detail layout. The divider is the hairline itself with a wider invisible grab area.

Props: left, right, defaultSize (px), min, max, storageKey (remembers the width in this browser).

Use for mail, approvals and anything with a list and a reading pane. On phones stack the panes instead.

PreviewCode

Drag the divider

Double-click resets. ← → move it when focused. The width is remembered per storageKey.

Props

Prop	Type	Notes
`items`	`{ id: string \| number; from: string; time?: string; subject: string; snippet?: string; unread?: boolean; to?: string; agent?: { label: string; tone?: Tone }; tags?: string[]; }[]`	Required
`selected?`	`string \| number`
`onOpen?`	`(m: NonNullable<InboxListProps["items"]>[number]) => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Prop	Type	Notes
`left`	`ReactNode`	Required
`right`	`ReactNode`	Required
`defaultSize?`	`number`
`min?`	`number`
`max?`	`number`
`storageKey?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.