Split
Type
Field
Resizable
Resizes two adjacent panes with a draggable 1px handle. Arrow keys adjust the split.
Preview
Left pane
Right pane
In action
When to use
Use it for
- Two panes the user sizes against each other: editor and preview, list and detail.
- Percentages for initial, min, and max.
Not for
- More than two panes; nest a Split.
- Layouts that should stack on phones by other rules; it stacks at 640px on its own.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Split } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/resizable.
2. Vendor the source
npx @noorddev/vlak-cli add resizable
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/resizable.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Split } from "@noorddev/vlak-react";
<Split initial={60} min={30} max={80} handleLabel="Resize editor and preview">
<Editor />
<Preview />
</Split>Props
Split
Two panes on a draggable hairline. Arrows step, Home/End jump; the axis follows the layout.
| Prop | Type | Default | Description |
|---|---|---|---|
initial | number | 50 | Starting share of the first pane, in percent. |
min | number | 20 | |
max | number | 80 | |
handleLabel | string | "Resize panes" | Accessible name of the handle. |
childrenrequired | [ReactNode, ReactNode] |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the handle |
| Arrow left, Arrow up | Shrinks the first pane by 2% |
| Arrow right, Arrow down | Grows it by 2% |
| Shift + Arrow keys | Moves by 10% |
| Home, End | Jumps to min or max |
Accessibility
- The handle is a <button role="separator"> with aria-orientation, aria-valuenow, aria-valuemin, aria-valuemax, and aria-label from handleLabel.
- Below 640px the panes stack and the axis follows: the orientation flips and the arrows move vertically.
Markup
<div class="rs-split"><div class="rs-split-pane" style="width:50%">Left</div><button class="rs-split-handle" role="separator" aria-valuenow="50"></button><div class="rs-split-pane" style="width:50%">Right</div></div>
Classes
.rs-split.rs-split-pane.rs-split-handle