Resizable
Panels split by draggable handles, for editors, consoles and split views.
Files
Editor
Terminal
Usage
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@zynactra/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel defaultSize="30%" minSize="20%">Files</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="70%">Editor</ResizablePanel>
</ResizablePanelGroup>Nest groups for grids. Sizes are strings with units ("30%", "240px").
Guidelines
- Set a
minSizeon every panel so none can be dragged to nothing. - Show the grip (
withHandle) when resizing isn't obvious from the layout. - On small screens, stack the panels or switch to Tabs; dragging thin handles on touch is hard.
API reference
Built on react-resizable-panels v4.