Resizable

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

export function Example() {
  return (
    <ResizablePanelGroup orientation="horizontal" className="h-80 rounded-lg border">
      <ResizablePanel defaultSize="40%">One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="60%">Two</ResizablePanel>
    </ResizablePanelGroup>
  );
}

ResizablePanelGroup                (react-resizable-panels Group; orientation="horizontal | vertical")
├── ResizablePanel                  (defaultSize / minSize / maxSize / collapsible)
├── ResizableHandle                 (draggable border between panels)
│   ├── withHandle                  (grip pill that follows the pointer along the border)
│   └── gripSide                    (pin the pill to the side being sized: start | end)
└── ResizablePanel
    └── ResizablePanelGroup         (nest a group inside a panel for split layouts)