# Split Pane

> Two resizable regions with keyboard controls and saved proportions.

- Category: Navigation
- Kind: component
- Page: https://uaiblocks.dev/components/split-pane
- Registry item: https://uaiblocks.dev/r/split-pane.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/split-pane.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/split-pane.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  SplitPane,
  SplitPaneHandle,
  SplitPanePrimary,
  SplitPaneSecondary,
  type SplitPaneVariant,
} from "@/components/ui/uai/split-pane";

export function SplitPanePreview({ variant = "card" }: { variant?: SplitPaneVariant }) {
  const [size, setSize] = useState(38);
  return (
    <div style={{ display: "grid", gap: 10 }}>
      <SplitPane
        variant={variant}
        value={size}
        onValueChange={setSize}
        min={25}
        max={70}
        storageKey="uai-preview-split-pane"
        style={{ height: 280 }}
      >
        <SplitPanePrimary>
          <ul style={{ margin: 0, padding: 12, listStyle: "none", display: "grid", gap: 4 }}>
            <li style={{ fontWeight: 550 }}>Refund request #4821</li>
            <li style={{ color: "var(--uai-muted)" }}>Shipping delay #4819</li>
            <li style={{ color: "var(--uai-muted)" }}>Invoice copy #4816</li>
          </ul>
        </SplitPanePrimary>
        <SplitPaneHandle aria-label="Resize inbox and conversation" />
        <SplitPaneSecondary>
          <div style={{ padding: 16, display: "grid", gap: 8 }}>
            <strong>Refund request #4821</strong>
            <p style={{ margin: 0, color: "var(--uai-muted)" }}>
              The order arrived after the event date. The customer asks for a refund to the original
              card.
            </p>
          </div>
        </SplitPaneSecondary>
      </SplitPane>
      <p style={{ margin: 0, color: "var(--uai-muted)", fontSize: 12 }}>
        List width: {Math.round(size)}%. Use the arrow keys, Home, End, or Enter on the divider.
      </p>
    </div>
  );
}
```

## Anatomy

- `SplitPane`
  - `SplitPanePrimary`
  - `SplitPaneHandle`
  - `SplitPaneSecondary`

## Accessibility

- The handle follows the WAI-ARIA window splitter pattern with role="separator", value bounds, and aria-controls.
- Arrow keys resize by the step, Home and End jump to the limits, and Enter collapses or restores the primary region.
- Pointer dragging uses pointer capture. The handle has a 12px hit area and a visible focus line.
- onValueChange reports the proportion; an optional storageKey saves and restores it from localStorage.