All components
Splitter
Resizable panel dividers with a separator line and a raised drag handle.
Install
zsh — splitter
1bunx stylexblocks add splitterUsage — Ark UI
splitter.tsx
12345678910111213import { Splitter } from "#components/ui/ark-ui/splitter.tsx";
export function Example() { return ( // panel sizing, pointer drag, and arrow-key resize come from the // machine; ResizeTrigger renders its own separator line and drag handle <Splitter.Root panels={[{ id: "a" }, { id: "b" }]} defaultSize={[50, 50]}> <Splitter.Panel id="a">{/* panel a */}</Splitter.Panel> <Splitter.ResizeTrigger id="a:b" /> <Splitter.Panel id="b">{/* panel b */}</Splitter.Panel> </Splitter.Root> );}