Resizable

ResizablePanelGroup creates a layout where panels can be resized by dragging a handle. Built on react-resizable-panels.

Interactive example#

Resizable · Live example

Projects

Studio foundations

Developer portal

In progress

Room to focus.

Adjust the split to fit the task in front of you.

Drag the divider, or focus it and use arrow keys to resize the panels.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@clidey/ux';

Horizontal split#

TSX

<ResizablePanelGroup direction="horizontal" className="min-h-[400px] rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Left panel</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Right panel</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Vertical split#

TSX

<ResizablePanelGroup direction="vertical" className="h-96 rounded-lg border">
  <ResizablePanel defaultSize={60}>
    <div className="p-4">
      <p className="font-semibold">Top panel</p>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={40}>
    <div className="p-4">
      <p className="font-semibold">Bottom panel</p>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Three-panel layout (IDE-style)#

TSX

<ResizablePanelGroup direction="horizontal" className="min-h-screen">
  {/* Sidebar */}
  <ResizablePanel defaultSize={20} minSize={15} maxSize={35}>
    <div className="h-full border-r p-4">
      <p className="font-semibold text-sm text-muted-foreground">EXPLORER</p>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />

  {/* Editor and terminal */}
  <ResizablePanel defaultSize={80}>
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel defaultSize={70}>
        <div className="h-full p-4">
          <p className="font-mono text-sm">Code editor area</p>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={30} minSize={15}>
        <div className="h-full bg-black/90 p-4">
          <p className="font-mono text-sm text-green-400">Terminal</p>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

Handle with grip icon#

Add withHandle to show a grip icon on the resize handle:

TSX

<ResizableHandle withHandle />

Props#

ResizablePanelGroup

Prop	Type	Default	Description
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	Split direction.
`className`	`string`	—	Additional CSS classes.
`onLayout`	`(sizes: number[]) => void`	—	Called when panel sizes change.
`id`	`string`	—	Unique ID for persisting layout state.

ResizablePanel

Prop	Type	Default	Description
`defaultSize`	`number`	—	Initial size as a percentage (0–100).
`minSize`	`number`	`0`	Minimum size as a percentage.
`maxSize`	`number`	`100`	Maximum size as a percentage.
`collapsible`	`boolean`	`false`	Allows collapsing to zero size.
`className`	`string`	—	Additional CSS classes.

ResizableHandle

Prop	Type	Default	Description
`withHandle`	`boolean`	`false`	Shows a grip icon in the center of the handle.
`className`	`string`	—	Additional CSS classes.

Was this page helpful?