ResizablePanels

Use ResizablePanels

ResizablePanels is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, ResizablePanels, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ResizablePanels label="Resize workspace" main={<Text>Navigation</Text>} secondary={<Text>Workspace</Text>} style={{height:"16rem"}} />
    </FloodRoot>
  );
}

Design notes

• Percentages describe the main pane and exclude the dedicated separator track. The host supplies content and scrolling.
• Drag the separator or use logical arrow keys, Home/End and Shift for large steps. Horizontal resizing follows RTL direction.
• value/onValueChange keeps the host in control. onValueCommit reports an accepted completed interaction; pointer cancellation restores the initial uncontrolled size.
• The separator occupies space so its touch area does not overlap panel content. Persisting layout and larger panel graphs belong to the host. Introduced in 0.2.7.

API reference