# ResizablePanelGroup A group of panels with handles you place yourself, shadcn's shape: `ResizablePanel` and `ResizableHandle` elements as direct children. ```tsx import { ResizablePanelGroup } from "@/components/ouro/resizable/resizable"; ``` ## Example ```tsx … … ``` ## 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`. | 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` | | `ResizablePanel` elements with a `ResizableHandle` between each pair, as direct children. | | `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`: ``. ## `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. [^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)