Splitter
Resizable master-detail panes on @zag-js/splitter (ADR 0009 — Base UI ships no equivalent). Drag or arrow-key resize, per-panel min/max size.
npm install @zag-js/splitter @zag-js/react Rendered example — light + dark
Light
Drag the handle, or focus it and press the arrow keys (Home/End jump to the min/max) — a common master-detail layout primitive.
Detail pane
Content on this side resizes as the left pane grows or shrinks, clamped to each panel's min/max size.
Dark
Drag the handle, or focus it and press the arrow keys (Home/End jump to the min/max) — a common master-detail layout primitive.
Detail pane
Content on this side resizes as the left pane grows or shrinks, clamped to each panel's min/max size.
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the
source
for the full API.
No snippet yet for this component — open the source link above, or read the contribution guide .