Splitter
Resizable split-pane layout with a draggable divider between two panels.
Examples
Horizontal split
Drag the divider to resize two stacked panes.
Vertical split
Drag the divider to resize two side-by-side panes.
Three panes
Files / Editor / Preview layout with two independent dividers.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Splitter } from "@rokle/components";import { Splitter } from "@rokle/components";
export function Example() {
return <Splitter />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the split. |
| defaultSize | number | 50 | Initial size of the first panel as a percentage. |
| children | ReactNode | - | Exactly two panel elements. |