ResizablePanelGroup

import { ResizablePanelGroup } from "@/components/ouro/resizable/resizable";

Example

<ResizablePanelGroup orientation="vertical" autoSaveId="preview">
  <ResizablePanel label="Preview" defaultSize={60}>…</ResizablePanel>
  <ResizableHandle aria-label="Resize the preview" />
  <ResizablePanel label="Console">…</ResizablePanel>
</ResizablePanelGroup>

Use instead when

• Use Resizable instead, which puts a handle between each pair of panels for you; reach for this only when a handle needs its own label.

Props

Type: ResizablePanelGroupProps.

autoSaveId

Type: 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)

Type: ReactNode

ResizablePanel elements with a ResizableHandle between each pair, as direct children.

className

Type: string

Layout only: the group fills its container; give it a size (h-96) or margins. Appearance classes warn in development.

handleLabel

Type: string

Default: "Resize {panel}"

Each handle's accessible name; {panel} is the label of the panel before it.

onLayout

Type: ((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

Type: "vertical" | "horizontal"

Default: "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: ResizablePanelGroup 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.