# Split Pane

> Resizable list–detail layout.

Component · Foundations · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/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.

## Example

```tsx
import { InboxList, SplitPane } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel tf-panel-flush"
      style={{
        height: 280,
        padding: 0,
        overflow: "hidden",
      }}
    >
      <SplitPane
        defaultSize={320}
        min={220}
        max={600}
        storageKey="demo"
        left={
          <div
            style={{
              padding: 16,
            }}
          >
            <InboxList
              selected={1}
              items={[
                {
                  id: 1,
                  from: "Ida Nolan",
                  time: "08:40",
                  subject: "Seat upgrade before renewal",
                  snippet: "We are growing faster than planned…",
                  unread: true,
                },
                {
                  id: 2,
                  from: "Jonas Petit",
                  time: "Yesterday",
                  subject: "Pricing review → Thursday?",
                  snippet: "Growth wants to join…",
                },
              ]}
            />
          </div>
        }
        right={
          <div
            style={{
              padding: 24,
            }}
          >
            <b>Drag the divider</b>
            <p className="tf-card-desc">
              Double-click resets. ← → move it when focused. The width is remembered per storageKey.
            </p>
          </div>
        }
      />
    </div>
  );
}
```

## Props

### InboxList

| 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. |

### SplitPane

| 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. |