ResizablePanel

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

Example

<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.

children

Type: ReactNode

The panel's content. It scrolls when it is larger than the panel.

className

Type: string

Layout only: padding (p-4). Appearance classes warn in development.

defaultSize

Type: number

The starting size, in percent of the group. Panels without one share what is left.

id

Type: string

The panel's id, which the handle's aria-controls points at. One is made up when you leave it out.

label (required)

Type: string

Names the panel; the handle after it is called "Resize {label}" for screen readers. It is always required.

maxSize

Type: number

Default: 100

The largest size a drag or key can give the panel, in percent.

minSize

Type: number

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