Resizable Panel

Panel A

Panel B

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/resizable-panel.json

npx shadcn@latest add https://prototyper-ui.com/r/resizable-panel.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/resizable-panel.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/resizable-panel.json

This will add the following files to your project:

components/ui/resizable-panel.tsx

Dependencies

This component uses react-resizable-panels under the hood. It will be installed automatically.

Usage

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

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="50%">Left panel content</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">Right panel content</ResizablePanel>
</ResizablePanelGroup>;

Anatomy

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

Sub-component	`data-slot`	Purpose	Required
`ResizablePanelGroup`	`resizable-panel-group`	Container that manages panel layout	Yes
`ResizablePanel`	`resizable-panel`	Individual panel with resizable size	Yes
`ResizableHandle`	`resizable-handle`	Drag handle between panels	Yes

Examples

Vertical orientation

<ResizablePanelGroup orientation="vertical" className="min-h-[300px]">
  <ResizablePanel defaultSize="60%">Top</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="40%">Bottom</ResizablePanel>
</ResizablePanelGroup>

Three panels

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="25%" minSize="15%">
    Sidebar
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">Main</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="25%" minSize="15%">
    Inspector
  </ResizablePanel>
</ResizablePanelGroup>

Styling

Data Slots

Slot name	Element
`resizable-panel-group`	Flex container for all panels
`resizable-panel`	Individual panel
`resizable-handle`	Drag handle separator

Customization Examples

/* Custom handle color */
[data-slot="resizable-handle"] {
  @apply bg-primary/20;
}

/* Wider drag zone */
[data-slot="resizable-handle"]::after {
  left: -4px;
  right: -4px;
}

API Reference

ResizablePanelGroup

Container that manages layout of child panels. Wraps react-resizable-panels Group.

Prop

Type

All react-resizable-panels Group props are forwarded.

ResizablePanel

Individual resizable panel. Wraps react-resizable-panels Panel.

Prop

Type

All react-resizable-panels Panel props are forwarded.

ResizableHandle

Drag handle between panels. Wraps react-resizable-panels Separator.

Prop

Type

All react-resizable-panels Separator props are forwarded.

Accessibility

Keyboard Interactions

Key	Action
`ArrowLeft`	Shrinks the panel to the left of the handle
`ArrowRight`	Grows the panel to the left of the handle
`ArrowUp`	Shrinks the panel above the handle
`ArrowDown`	Grows the panel above the handle
`Home`	Collapses the panel to its minimum size
`End`	Expands the panel to its maximum size

Keyboard interactions are provided by the underlying react-resizable-panels library.

On this page