Two-pane layout with a keyboard and pointer resizable separator.
Also known as: split pane, resizable panes, splitter
Install with the CLI, or copy the component source into your project.
Add split (npm)
1npx --yes -p @default-file/ui df-ui add split
Horizontal split with a keyboard and pointer resizable separator. Arrow keys step the ratio. Home and End jump to the bounds. Double-click restores defaultRatio.
Primary pane 40 percent. Arrow keys step the divider. Home and End jump to the bounds. Double-click restores 40 percent.
Outline
File tree and layers
Canvas
Working surface
orientation vertical stacks the primary pane above the secondary pane.
Inspector
Selected object properties
Timeline
Playback and keyframes
minSize and maxSize clamp the primary pane. Use a unit ratio, a percent string, or a pixel object.
Primary pane 35 percent, clamped between 160 pixels and 70 percent.
Library
Assets and presets
Preview
Selected asset
disabled locks the divider and removes it from the tab order.
Notes
Read only layout
Canvas
Working surface
Two-pane layout with a keyboard and pointer resizable separator. Pass exactly two children as primary and secondary panes.
| Prop | Type | Default | Notes |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | horizontal splits left and right. vertical splits top and bottom. |
| ratio | number | - | Controlled primary pane share as a unit ratio (0 to 1) or a percentage greater than 1. |
| defaultRatio | number | 0.5 | Uncontrolled initial ratio. Double-clicking the divider restores this value. |
| onRatioChange | (ratio: number) => void | - | Called with the clamped unit ratio after each change. |
| minSize | number | `${number}%` | { px: number } | - | Minimum primary pane size as a unit ratio, percent string, or pixel object. |
| maxSize | number | `${number}%` | { px: number } | - | Maximum primary pane size as a unit ratio, percent string, or pixel object. |
| step | number | 0.02 | Arrow-key step as a unit ratio. |
| disabled | boolean | false | Locks the divider and removes it from the tab order. |
| children | [ReactNode, ReactNode] | - | Primary pane first, secondary pane second. |
| className | string | - | Additional styles on the root. |
Separator (role="separator"): The divider exposes aria-orientation and aria-valuenow, min, and max as percentages. Arrow keys step the ratio; Home and End jump to the bounds. There is no name prop on the separator; it may lack a spoken label until the kit adds one.