---
title: Resizable
description: Accessible resizable panel groups and layouts with keyboard support.
icon: move
author:
  name: bvaughn
  url: https://github.com/bvaughn
search:
  keywords: [split pane, splitter]
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/resizable' },
    { name: 'react-resizable-panels', url: 'https://react-resizable-panels.vercel.app/' },
    { name: 'Lucide', url: 'https://lucide.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/resizable
```

<ComponentPreview name="resizable-demo" description="A group of resizable horizontal and vertical panels." />

## When to use

Resizable panels create flexible layouts where users can adjust the size of content areas. Use this decision tree to determine when resizable panels are appropriate:

```mermaid
graph TD;
    A[❓ Need flexible layout?] --> B{User-controlled sizing?};
    A --> C[ℹ️ Use fixed layouts];
    B --> D{Multiple content areas?};
    B --> E[⚠️ Single area only?];
    D --> F{Side-by-side content?};
    D --> G{Nested layouts?};
    E --> H[ℹ️ Use standard containers];
    F --> I[✅ Use horizontal ResizablePanelGroup];
    G --> J[✅ Use nested ResizablePanelGroups];
    I --> K[✅ 2-4 panels optimal];
    J --> L[✅ Complex dashboard layouts];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class I,J,K,L recommended;
    class E discouraged;
    class A,B,D,F,G decision;
    class C,H neutral;
```

## Usage

### Basic Horizontal Layout

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/redpanda-ui/resizable';

<ResizablePanelGroup orientation="horizontal" className="min-h-[200px]">
  <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>;
```

### With Size Constraints

```tsx
<ResizablePanelGroup orientation="horizontal" className="min-h-[200px]">
  <ResizablePanel defaultSize="25%" minSize="20%" maxSize="40%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar (20-40%)</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="75%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Main Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>
```

### Three Panel Layout

```tsx
<ResizablePanelGroup orientation="horizontal" className="min-h-[200px]">
  <ResizablePanel defaultSize="20%" minSize="15%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Nav</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="60%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="20%" minSize="15%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>
```

### Nested Layouts

```tsx
<ResizablePanelGroup orientation="vertical" className="min-h-[400px]">
  <ResizablePanel defaultSize="25%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Header</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="75%">
    <ResizablePanelGroup orientation="horizontal">
      <ResizablePanel defaultSize="30%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Sidebar</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="70%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Main Content</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>
```

## Anatomy

The Resizable component system is built with react-resizable-panels and provides a flexible layout system:

```
<ResizablePanelGroup> (Container)
├── orientation="horizontal" | "vertical"
├── Layout Management
│   ├── Size distribution
│   ├── Constraint enforcement
│   └── Resize calculations
├── <ResizablePanel> (Content Areas)
│   ├── Size Properties
│   │   ├── defaultSize - initial size percentage
│   │   ├── minSize - minimum size percentage
│   │   └── maxSize - maximum size percentage
│   ├── Content Container
│   └── Flex/Grid Positioning
└── <ResizableHandle> (Resize Controls)
    ├── Visual Divider - 1px border line
    ├── Interaction Area - invisible expanded hit area
    ├── Handle Indicator (optional)
    │   ├── <GripVertical> icon
    │   └── Rounded border container
    ├── Keyboard Support
    │   ├── Arrow keys for adjustment
    │   └── Home/End for min/max
    └── Mouse/Touch Support
        ├── Drag interaction
        └── Double-click reset

Data Attributes:
├── [aria-orientation] - horizontal/vertical
├── [data-resize-handle-active] - during resize
└── [data-resize-handle-state] - drag/hover/idle
```

### Key Features:

- **Flexible Sizing**: Percentage-based with constraints
- **Keyboard Accessible**: Full keyboard navigation support
- **Touch Friendly**: Works on mobile devices
- **Nested Layouts**: Supports complex nested arrangements
- **Persistent State**: Can save/restore layout configurations
- **Smooth Animations**: Smooth resize transitions

## Examples

### Vertical

Use the `orientation` prop to set the direction of the resizable panels.

<ComponentPreview name="resizable-vertical-demo" description="A group of resizable vertical panels." />

```tsx lineNumbers {9}
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';

export default function Example() {
  return (
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  );
}
```

### Handle

You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component.

<ComponentPreview name="resizable-handle-demo" description="A group of resizable panels with a handle." />

```tsx lineNumbers {11}
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';

export default function Example() {
  return (
    <ResizablePanelGroup orientation="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
    </ResizablePanelGroup>
  );
}
```

## Credits

- We use [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) for the resizable component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/resizable) for the resizable style.