# Resizable: Remember the layout

> `useDefaultLayout` saves sizes to `localStorage` and restores them on the next visit without animating in. Give each panel an `id`.

Example: https://hextaui.com/docs/resizable/examples/persist
Component docs: https://hextaui.com/docs/resizable.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/resizable-persist.json
```

This adds `components/examples/resizable/persist.tsx` with the Resizable component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/resizable/persist.tsx"
"use client"

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
  useDefaultLayout,
} from "@/components/ui/resizable"

export function ResizablePersist() {
  const { defaultLayout, onLayoutChanged } = useDefaultLayout({
    id: "hextaui-resizable-persist",
  })

  return (
    <div className="h-56 w-full max-w-md overflow-hidden rounded-xl border">
      <ResizablePanelGroup
        defaultLayout={defaultLayout}
        onLayoutChanged={onLayoutChanged}
      >
        <ResizablePanel id="list" defaultSize="40%" minSize="20%">
          <div className="flex h-full items-center justify-center p-4 text-center text-sm font-medium">
            Resize me, then reload
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel id="detail" minSize="20%">
          <div className="flex h-full items-center justify-center text-sm font-medium">
            Detail
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}
```

## Props in this example

### ResizablePanelGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultLayout` | `Layout` | – |  |
| `onLayoutChanged` | `(layout, meta) => void` | – | Once a change settles. |

### ResizablePanel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultSize` | `number \| string` | – |  |
| `minSize` | `number \| string` | – |  |
| `id` | `string` | – | Needed to remember layouts. |

## More Resizable examples

- [Collapsible](https://hextaui.com/docs/resizable/examples/collapsible.md)
- [Size readout](https://hextaui.com/docs/resizable/examples/size.md)
- [Vertical](https://hextaui.com/docs/resizable/examples/vertical.md)
- [Visible grip](https://hextaui.com/docs/resizable/examples/handle.md)
- [Right to left](https://hextaui.com/docs/resizable/examples/rtl.md)