All components

Resizable

Split panes with draggable handles.

Full API on ui.shadcn.com

Nested split

Drag the handles between panels to resize.

Panel one
Top
Bottom
<ResizablePanelGroup direction="horizontal" className="min-h-48 w-full rounded-lg border">
  <ResizablePanel defaultSize={50}>Panel one</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel defaultSize={50}>Top</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>Bottom</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>