## Split Pane (S—198)

Two resizable panes: a draggable divider that snaps a pane closed, remembers its size and resets on double-click.

- URL: https://sundaeui.dev/components/split-pane
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/split-pane.json`
- Tags: resizable, editor, panes, split, layout, divider

Drag the divider to resize; drag a pane below its minimum and it collapses with a snap. Double-click the divider to restore the default split.
Works horizontally or vertically. The divider is a proper separator you can focus and move with the arrow keys.

### Usage

```tsx
import { SplitPane } from '@/components/sundae/split-pane'

<SplitPane />
```

### Props

- `direction` (`'horizontal' | 'vertical'`, default `'horizontal'`): Split axis.
- `defaultSize` (`number`, default `40`): First pane size in percent.
- `min` (`number`, default `20`): Min size before collapsing, percent.
- `children` (`[ReactNode, ReactNode]`, required): The two panes.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Editors, mail clients, master–detail layouts on wide screens.

### When not to use

- Small phones: stack the content instead.

### Accessibility

- The divider is role="separator" with aria-valuenow in percent and aria-controls the first pane.
- Enter toggles collapse; arrows move it 5%.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / → or ↑ / ↓: Move the divider
- Enter: Collapse / restore the first pane
- Double-click: Reset