# Resizable

Panels you can resize by dragging or with the keyboard.

Group: Layout

## Import

```tsx
import { Resizable } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function ResizableDemo() {
  const cell = (label: string) => (
    <Flex h="full" align="center" justify="center" fontWeight="semibold">
      {label}
    </Flex>
  )
  return (
    <Resizable.PanelGroup h="56" maxW="xl" rounded="l3" borderWidth="1px">
      <Resizable.Panel defaultSize={40} minSize={20}>
        {cell("One")}
      </Resizable.Panel>
      <Resizable.Handle withHandle />
      <Resizable.Panel>
        <Resizable.PanelGroup direction="vertical">
          <Resizable.Panel defaultSize={50}>{cell("Two")}</Resizable.Panel>
          <Resizable.Handle withHandle />
          <Resizable.Panel>{cell("Three")}</Resizable.Panel>
        </Resizable.PanelGroup>
      </Resizable.Panel>
    </Resizable.PanelGroup>
  )
}
```

## Props

### Panel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultSize` | `number` |  | Percent (0–100). Panels without a `defaultSize` share the remaining space equally. |
| `minSize` | `number` |  |  |
| `maxSize` | `number` |  |  |

### PanelGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `Direction` |  |  |
| `onLayout` | `(sizes: number[]) => void` |  | Called whenever sizes change (array of percents, in panel order). |

### Handle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `withHandle` | `boolean` |  | Show a small grip in the middle of the line. |
| `step` | `number` | `5` | Keyboard step in percent. |

`*` = required. Style props and HTML attributes are accepted too.