Resizable

Resizable panel groups for creating flexible, adjustable layouts.

Basic

Panel A

Panel B

<VStack className="w-full max-w-lg mx-auto">
  <ResizablePanelGroup direction="horizontal" className="min-h-[200px] rounded-xl border">
    <ResizablePanel defaultSize={50}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Panel A</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Panel B</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</VStack>

With handle indicator

Left

Right

<VStack className="w-full max-w-lg mx-auto">
  <ResizablePanelGroup direction="horizontal" className="min-h-[200px] rounded-xl border">
    <ResizablePanel defaultSize={50}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Left</span>
      </div>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={50}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Right</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</VStack>

Vertical

Header

Content

<VStack className="w-full max-w-lg mx-auto">
  <ResizablePanelGroup direction="vertical" className="min-h-[300px] rounded-xl border">
    <ResizablePanel defaultSize={30}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Header</span>
      </div>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={70}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Content</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</VStack>

Three panels

Sidebar

Main

Inspector

<VStack className="w-full max-w-lg mx-auto">
  <ResizablePanelGroup direction="horizontal" className="min-h-[200px] rounded-xl border">
    <ResizablePanel defaultSize={25} minSize={15}>
      <div className="flex h-full items-center justify-center p-4">
        <span className="text-sm font-semibold">Sidebar</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>
      <div className="flex h-full items-center justify-center p-4">
        <span className="text-sm font-semibold">Main</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={25} minSize={15}>
      <div className="flex h-full items-center justify-center p-4">
        <span className="text-sm font-semibold">Inspector</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</VStack>

Nested layout

Sidebar

Editor

Terminal

<VStack className="w-full max-w-lg mx-auto">
  <ResizablePanelGroup direction="horizontal" className="min-h-[300px] rounded-xl border">
    <ResizablePanel defaultSize={25} minSize={20}>
      <div className="flex h-full items-center justify-center p-4">
        <span className="text-sm font-semibold">Sidebar</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={75}>
      <ResizablePanelGroup direction="vertical">
        <ResizablePanel defaultSize={70}>
          <div className="flex h-full items-center justify-center p-4">
            <span className="text-sm font-semibold">Editor</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={30} minSize={20}>
          <div className="flex h-full items-center justify-center p-4">
            <span className="text-sm font-semibold">Terminal</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </ResizablePanel>
  </ResizablePanelGroup>
</VStack>