Splitter
Panels side by side or stacked with a gutter between them: drag it or move it with the keyboard to share the space. Sizes are percentages with minimums and maximums; panels can snap shut, nest and remember their sizes.
Basic
Two panels share the width evenly. Drag the gutter, or focus it with Tab and use the arrow keys.
Vertical
layout="vertical" stacks the panels; the gutters move up and down.
Sizes
size, minSize and maxSize are percentages of the splitter. resizing reports the sizes while the gutter moves.
Sizes: 30% / 70%
Nested
A splitter inside a panel fills it and drops its own border.
Collapsible
A collapsible panel snaps shut when it is dragged below its minSize and opens at minSize when it is dragged back. Enter on the gutter does the same.
Sidebar is open
Stateful
With stateKey the sizes are saved after every resize and come back after a reload; stateStorage="local" keeps them across sessions.
Disabled
disabled locks the gutters: they cannot be dragged or focused.
Design tokens
dt and gutterSize change one splitter — here a wider gutter on the ground colour with a visible grip.