---
id: "packages/active-ui/resizable"
title: "Resizable"
description: "Panels side by side or stacked, whose sizes the reader changes by dragging the handle between them."
url: "/packages/active-ui/resizable"
locale: "en"
revision: "d04adf69eb4d04f0"
---

# Resizable

Resizable panels split an area into parts the reader can resize: a list beside its detail, an
editor above its output. Each handle between two panels can be dragged, or moved with the keyboard.
It is built on [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels),
whose props it passes through.

**Example: A list beside a detail, split again**

Client: Runs entirely in your browser. Source: `examples/ui/resizable.tsx`.

```tsx
// apps/docs/examples/ui/resizable.tsx
'use client';

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@workspace/active-ui/components/primitives/resizable';

/**
 * Panels whose sizes the reader drags: a list beside a detail pane, the
 * detail split again from top to bottom. Sizes as strings are percentages;
 * numbers would be pixels.
 */
export default function ResizableExample() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="min-h-64 max-w-lg rounded-lg border"
    >
      <ResizablePanel defaultSize="35" minSize="20">
        <div className="flex h-full items-center justify-center p-4 text-sm">
          Participants
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle aria-label="Resize the list" />
      <ResizablePanel defaultSize="65">
        <ResizablePanelGroup orientation="vertical">
          <ResizablePanel defaultSize="60">
            <div className="flex h-full items-center justify-center p-4 text-sm">
              Details
            </div>
          </ResizablePanel>
          <ResizableHandle aria-label="Resize the details" />
          <ResizablePanel defaultSize="40" minSize="15">
            <div className="flex h-full items-center justify-center p-4 text-sm">
              History
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}
```

## Usage

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

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="35" minSize="20">
    List
  </ResizablePanel>
  <ResizableHandle withHandle aria-label="Resize the list" />
  <ResizablePanel defaultSize="65">Detail</ResizablePanel>
</ResizablePanelGroup>;
```

## Anatomy

- `ResizablePanelGroup`: the area. `orientation`: `horizontal` (side by side, the default) or
  `vertical` (stacked). `onLayoutChange` reports the sizes, for example to store them.
- `ResizablePanel`: a part. `defaultSize`, `minSize` and `maxSize`: **a string is a percentage**
  (`"35"`), **a number is pixels** (`200`). `collapsible` with `collapsedSize` lets a panel
  collapse when dragged below its minimum.
- `ResizableHandle`: the boundary between two panels. `withHandle` draws a grip on it.

Panels nest: a panel can hold a group of the other orientation, as in the example.

## What your application provides

- A height for a horizontal group, or for the area a vertical group fills.
- An accessible name for each handle (`aria-label`), such as "Resize the list".
- Keeping the sizes across visits, if wanted, from `onLayoutChange`.

## Accessibility and keyboard

- Each handle is a focusable `role="separator"` with its value: the arrow keys resize the panels
  beside it, `Home` and `End` move it to the limits, and `Enter` collapses or expands a collapsible
  panel.

## API

**ResizableHandle**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `withHandle` | `boolean` | no | Draws a grip on the handle, so it reads as something to drag. |

**ResizablePanel**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

ResizablePanel has no props of its own.

**ResizablePanelGroup**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

ResizablePanelGroup has no props of its own.

> [!NOTE]
> **Based on shadcn/ui**
>
> This page adapts the Resizable documentation of shadcn/ui (MIT licence) to
> this package; see [Third-party notices](/third-party-notices).