# Resizable Panels

> Two or more panes with drag handles between them, side by side or stacked; panels can nest.

Component · Foundations · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/ResizablePanels/)

Two or more panes with drag handles between them, side by side or stacked; panels can nest.

- Handles are separators with a value: ←/→ (↑/↓ when stacked) resize by 2%, Home/End jump to the
  limits, double-click resets to equal sizes.
- `min` keeps every pane above a share of the whole; `storageKey` remembers the sizes.

## Example

```tsx
import { ResizablePanels } from "@twentyfirstmedia/halo";

const pane = (title: string, text: string) => (
  <div className="tf-col" style={{ gap: 6, padding: 16 }}>
    <b>{title}</b>
    <span className="tf-card-desc">{text}</span>
  </div>
);

export default function Preview() {
  return (
    <div className="tf-panel" style={{ padding: 0, height: 320, overflow: "hidden" }}>
      <ResizablePanels
        labels={["Folders", "Messages"]}
        defaultSizes={[22, 38, 40]}
        panels={[
          pane("Folders", "Inbox, Sent, Archive"),
          pane("Messages", "Drag a handle, or focus it and use the arrow keys."),
          <ResizablePanels
            key="r"
            orientation="vertical"
            labels={["Thread"]}
            defaultSizes={[60, 40]}
            panels={[pane("Thread", "Northwind · Seat upgrade"), pane("Reply", "Write a reply…")]}
          />,
        ]}
      />
    </div>
  );
}
```

## Props

### ResizablePanels

| Prop | Type | Notes |
| --- | --- | --- |
| `panels` | `ReactNode[]` | Required |
| `defaultSizes?` | `number[]` | Start sizes in percent (default: equal). |
| `min?` | `number` | Smallest size of a panel in percent (default 10). |
| `orientation?` | `"horizontal" \| "vertical"` |  |
| `storageKey?` | `string` | Remembers the sizes in localStorage under this key. |
| `labels?` | `string[]` | Accessible names of the panels, used for the resize handles. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |