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 github:itsvigneshv/default-file-ui#main df-ui add split
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.