All components
Splitter
Resizable panel dividers with a separator line and a raised drag handle.
Install
zsh — splitter
1bunx stylexblocks add splitterUsage — Base UI
splitter.tsx
1234567891011121314import { Splitter } from "#components/ui/base-ui/splitter.tsx";
export function Example() { return ( // Base UI has no splitter machine; the component carries the percentage // sizes itself (size / defaultSize / onSizeChange) and resizes the // adjacent pair with the arrow keys from the focused trigger <Splitter.Root defaultSize={[50, 50]}> <Splitter.Panel index={0}>{/* panel a */}</Splitter.Panel> <Splitter.ResizeTrigger index={0} /> <Splitter.Panel index={1}>{/* panel b */}</Splitter.Panel> </Splitter.Root> );}