Resizable

Resizable splits a layout into panels separated by draggable handles, so users can size regions to taste. Use it for split editors, sidebars beside content, or any pane layout the user should control. It is built on react-resizable-panels.

Preview

Installation

npx shadcn@latest add @cubby-ui/resizable

Usage


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


<ResizablePanelGroup>
  <ResizablePanel />
  <ResizableHandle />
</ResizablePanelGroup>

Composition


ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Set direction on ResizablePanelGroup to lay panels out horizontally or vertically, and place a ResizableHandle between each pair.

Value	Description
`horizontal`	Panels sit side by side, drag left/right.
`vertical`	Panels stack, drag up/down.

Examples

Vertical Layout

Set direction="vertical" on ResizablePanelGroup to stack panels.

Three Panels

Add more ResizablePanel and ResizableHandle pairs for additional sections.

Min and Max Size

Use minSize and maxSize on ResizablePanel to clamp how far it can resize.

Custom Handle

Pass withHandle to ResizableHandle to render a visible drag grip.

Nested Panels

Nest a ResizablePanelGroup inside a ResizablePanel for grid-like layouts.

Accessibility

ResizableHandle is keyboard operable: focus it and use the arrow keys to resize, with a focus ring on :focus-visible. The underlying separators expose the appropriate role and value attributes from react-resizable-panels.

API Reference

Resizable is built on top of react-resizable-panels. All props pass through to the underlying PanelGroup, Panel, and PanelResizeHandle. The documentation below covers the key props and the custom prop on ResizableHandle.

For the complete API, see the react-resizable-panels documentation.