KQ-176 · SPLIT/PANE
Split Pane
Two panes with a divider you can move. Dragging tracks the handle one to one; on release it eases to the nearest snap — the thirds and the half — if it is close, and stays put otherwise. The grabber swells while hovered or held so the hit target announces itself.
KQ-176 · SPLIT/PANE
PLAN
Drag the divider, or focus it and use the arrow keys. Release near a third or the half and it settles there.
READOUT
4.6 mm · 48 kHz · pass 2 · tolerance held inside a tenth.
Divider snaps to thirds
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/split-pane
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| start / end | ReactNode | — | The two pane contents. |
| defaultSplit / min / max | number | 50 / 20 / 80 | Start width and travel limits, in percent. |
| snap | number[] | — | Targets the divider settles to on release, within 4%. |