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

# ResizablePanel

One resizable area of a `Resizable` (or `ResizablePanelGroup`), sized in percent of the group. Its content scrolls when it does not fit.

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

## Example

```tsx
<ResizablePanel label="Files" defaultSize={25} minSize={15}>
  <FileTree />
</ResizablePanel>
```

## Use instead when

- Use it only as a direct child of `Resizable` or `ResizablePanelGroup`; a fixed layout needs a plain grid instead.

## Props

Type: `ResizablePanelProps`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` |  | The panel's content. It scrolls when it is larger than the panel. |
| `className` | `string` |  | Layout only: padding (`p-4`). Appearance classes warn in development. |
| `defaultSize` | `number` |  | The starting size, in percent of the group. Panels without one share what is left. |
| `id` | `string` |  | The panel's id, which the handle's `aria-controls` points at. One is made up when you leave it out. |
| `label` (required) | `string` |  | Names the panel; the handle after it is called "Resize {label}" for screen readers. It is always required. |
| `maxSize` | `number` | `100` | The largest size a drag or key can give the panel, in percent. |
| `minSize` | `number` | `10` | The smallest size a drag or key can give the panel, in percent. |

## `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: ResizablePanel 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)