PlumUI

Resizable

Panels you can resize by dragging, with min and max sizes, keyboard control and a double-click reset that springs back.

Data Display
InboxAll mailStarredDraftsSentArchive
Weekly sync notes
Tap to read the full thread
Invoice #2041
Tap to read the full thread
Your build is ready
Tap to read the full thread
Design review
Tap to read the full thread
Weekly sync notes
From Léa · 9:41

Drag the handles to resize. Double-click one to snap the panels back to their default sizes.

Playground

Tweak the props, the preview and the code follow.

Panel 1
Panel 2
Panel 3
Props
3
15
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel minSize={15}>Panel 1</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel minSize={15}>Panel 2</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel minSize={15}>Panel 3</ResizablePanel>
</ResizablePanelGroup>

Installation

npx @plumsydev/plum-ui add resizable

Usage

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>Content</ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical

export default function Page() {
  return <Dashboard />
}
$ pnpm dev
▲ Ready on http://localhost:3000
✓ Compiled in 312ms

Nested

Groups nest freely. onLayout reports sizes so you can persist them.

Sidebar30%
Editor60%
Terminal40%

API Reference

ResizablePanelGroup

PropTypeDefault
direction

Layout axis.

"horizontal" | "vertical""horizontal"
onLayout

Sizes in percent after every change.

(sizes: number[]) => void—

ResizablePanel

PropTypeDefault
defaultSize

Initial size in percent. Panels without one share the rest.

number—
minSize

Minimum size in percent.

number0
maxSize

Maximum size in percent.

number100

ResizableHandle

PropTypeDefault
withHandle

Show a grip in the middle of the divider.

booleanfalse

Notes

  • Handles are focusable: arrows move by 2%, Shift + arrows by 10%, Enter resets.
  • Panels and handles must be direct children of the group so it can pair neighbours.
PreviousRatingNextScroll Area