<!-- Generated by scripts/gen-docs.mts from the JSDoc in registry/. Do not edit; run `pnpm run docs`. -->

# Resizable

Panels side by side (or stacked) with a draggable handle between each pair: a file list beside an editor, a preview above a console. Each handle is a window splitter for screen readers, named after the panel before it ("Resize Files"), and works with a mouse, touch (a 44px hit area) and the keyboard: the arrow keys, Home, End and Enter. Sizes are percentages; `autoSaveId` keeps the layout across visits.

```tsx
import { Resizable } from "@/components/ouro/resizable/resizable";
```

## Example

```tsx
<Resizable autoSaveId="editor" className="h-96">
  <ResizablePanel label="Files" defaultSize={25} minSize={15}>
    <FileTree />
  </ResizablePanel>
  <ResizablePanel label="Editor">
    <Editor />
  </ResizablePanel>
</Resizable>
```

## Use instead when

- Use a plain grid instead when the user never needs to change the sizes, and `Sheet` for a side panel that opens and closes.

## Props

Type: `ResizableProps`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `autoSaveId` | `string` |  | Saves the layout in localStorage under this id and restores it on the next visit, after hydration (the server renders the default sizes). Storage that is unavailable or full is ignored. |
| `children` (required) | `ReactNode` |  | Two or more `ResizablePanel` elements, as direct children. A handle goes between each pair. |
| `className` | `string` |  | Layout only: the group fills its container; give it a size (`h-96`) or margins. Appearance classes warn in development. |
| `handleLabel` | `string` | `"Resize {panel}"` | Each handle's accessible name; `{panel}` is the label of the panel before it. |
| `onLayout` | `((sizes: number[]) => void)` |  | Called with every panel's size, in percent, when the user finishes a drag or presses a key on a handle. |
| `orientation` | `"vertical" \| "horizontal"` | `"horizontal"` | `horizontal` puts the panels side by side; `vertical` stacks them (give the group a height). |

## Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

- `direction`: Not a prop. Ouro UI names it `orientation`: `<Resizable orientation="vertical">`.

## `className` is for layout only

Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: Resizable merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes]

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn.

Alignment classes (`text-center`) warn too: set alignment on a parent element.

[^layout-classes]: test:registry/ouro/components/ouro/resizable/resizable.test.tsx::Resizable layout > lets app layout classes win on the group and panels verify:testExists(registry/ouro/components/ouro/resizable/resizable.test.tsx::Resizable layout > lets app layout classes win on the group and panels)